vue 父子组件双向绑定
vue组件有2大特性:
1.全局组件和局部组件
2.父子组件的数据传递
接下来直接用demo直接看如何传值(静态传值)
father.vue
<template>
<div>
<Counter num="10"></Counter>//静态传值
</div>
</template>
<script>
import Counter from './child.vue' //引入子组件
export default {
components:{Counter}, //命名子组件
data(){
}
}
</script>
child.vue
<template>
<div>
<button>+</button>
<p><span>{{num}}</span></p>
</div>
</template>
<script>
export default {
props:['num'], //props接收父组件传来的值。num必须和父组件的命名一样
methods:{ }
}
</script>
动态传值
father.vue
<template>
<div>
//动态改变num值需要用v-bind,子组件通$emit变量获取父组件的方法,接收事件名
<Counter v-bind:num="num" v-on:incre="increment" v-on:decre="decrement"></Counter>
</div>
</template>
<script>
import Counter from './child.vue'
export default {
components:{Counter},
data(){
return{
num:10,
}
},
methods:{
increment(){
this.num++;
},
decrement(){
this.num--;
}
}
}
</script>
child.vue
<template>
<div>
<button @click="increment">+</button>
<button @click="decrement">-</button>
<p><span>{{num}}</span></p>
</div>
</template>
<script>
export default {
data(){
return{}
},
props:['num'],
methods:{
increment(){
this.$emit('incre'); //获取父组件的方法,动态获取父组件的num值
},
decrement(){
this.$emit('decre');
}
}
}
</script>
vue 父子组件双向绑定的更多相关文章
- Angular中父子组件双向绑定传值
下面为大家展示一个较为简单的ng父子组件双向绑定传值,下面是父组件页面 这个页面的大概功能就是父组件(红色)通过输入框输入内容反映到子组件上进行展示,并且进行了投影, 子组件(橙黄色)通过Input输 ...
- Vue - 自定义组件双向绑定
前言 无论在任何的语言或框架中,我们都提倡代码的复用性.对于Vue来说也是如此,相同的代码逻辑会被封装成组件,除了复用之外,更重要的是统一管理提高开发效率.我真就接手过一个项目,多个页面都会用到的列表 ...
- vue v-io 父子组件双向绑定多个数据
vue-io-directive 可以减少使用emit,组件自带的v-model好像也只能设置一个 安装 npm i vue-io-directive 使用 import Vue from 'vue' ...
- Vue父子组件双向数据绑定
[本文出自天外归云的博客园] 简介 Vue版本:2.9.6 Element版本:2.4.8 问题描述:子组件对Element中el-select进行封装,父组件中把选中的值selected和所有选项o ...
- 组件的通信 :provide / inject 对象进入后,就等于不用props,然后内部对象,直接复制可以接受数组,属性不能直接复制,可以用Object.assgin覆盖对象,或者Vue的set 双向绑定数据
组件的通信 :provide / inject 对象进入后,就等于不用props,然后内部对象,直接复制可以接受数组,属性不能直接复制,可以用Object.assgin覆盖对象,或者Vue的set 双 ...
- vue父子组件状态同步的最佳方式续章(v-model篇)
大家好!我是木瓜太香!一名前端工程师,之前写过一篇<vue父子组件状态同步的最佳方式>,这篇文章描述了大多数情况下的父子组件同步的最佳方式,也是被开源中国官方推荐了,在这里表示感谢! 这次 ...
- vue父子组件之间传值
vue父子组件进行传值 vue中的父子组件,什么是父组件什么是子组件呢?就跟html标签一样,谁包裹着谁谁就是父组件,被包裹的元素就是子组件. 父组件向子组件传值 下面用的script引入的方式,那种 ...
- vue 父子组件通信详解
这是一篇详细讲解vue父子组件之间通信的文章,初始学习vue的时候,总是搞不清楚几个情况 通过props在父子组件传值时,v-bind:data="data",props接收的到底 ...
- vue组件定义方式,vue父子组件间的传值
vue组件定义方式,vue父子组件间的传值 <!DOCTYPE html> <html lang="zh-cn"> <head> <met ...
随机推荐
- Ubuntu 16.04安装JMeter测试工具
JMeter是Java的测试工具,由Apache开发. 同样,JMeter是跨平台的. 下载: http://jmeter.apache.org/download_jmeter.cgi 安装: 7z ...
- 网易互娱2017实习生招聘游戏研发工程师在线笔试第二场 C
偶尔碰到这题,简单数位DP题,然而我已生疏了…… 这次算是重新想到的,看来对DP的理解有增进了…… dp[i][j][k],表示前i为,mod为j,是否出现2.3.5的剩下的数位可组成的数字.答案就是 ...
- 1064 - You have an error in your SQL syntax问题解决
新建表sql语句例如以下,在navicat for mysql 中执行,报错. CREATE TABLE `t_article`( `bh` bigint(20) NOT NULL PRIMARY K ...
- 关于函数return的一些理解与小实例
先看代码: function example (){ var index=1; return {//像这种加个大括号的就是返回一个对象了,而不仅仅是一个值 index, net:function(){ ...
- C++MFC编程笔记day01 MFC介绍、创建MFC程序和重写消息处理
一.MFC概念和作用 1.全称Microsoft Foundation Class Library,我们称为微软基础类库,封闭了绝大部分的win32 Api函数,C++语法中的数据结构,程序的运行流程 ...
- PromiseKit入门
原文:Getting Started with PromiseKit 作者:Michael Katz 译者:kmyhy 异步编程真的让人头疼.不管你怎样小心,总是easy出现臃肿的托付.混乱的完毕句柄 ...
- 打开google 新地址
还在为谷歌打不开而发愁吗? 那就试试这个吧 91.213.30.151
- Android一些网站介绍
1.开源镜像: Android SDK在线更新镜像服务器 中国科学院开源协会镜像站地址: IPV4/IPV6: http://mirrors.opencas.cn 端口:80 IPV4/IPV6: h ...
- Keepalived+lvs 搭建高可用负载均衡
本站点停止更新,请访问:blog.coocap.com 不了解负载均衡高可用的童鞋,强烈建议先看keepalived+nginx高可用负载均衡: 传送门(求粉):http://www.cnblogs. ...
- java多线程面试题(来自转载)
在典型的Java面试中, 面试官会从线程的基本概念问起, 如:为什么你需要使用线程, 如何创建线程,用什么方式创建线程比较好(比如:继承thread类还是调用Runnable接口),然后逐渐问到并发问 ...