vue 父子组件传递数据
单向数据流：
数据从父级组件传递给子组件，只能单向绑定。
子组件内部不能直接修改从父级传递过来的数据。
解决方法： 可以使用data将父组件传递过来的数据拷贝一份存放起来，再修改拷贝的数据就可以了
//用data来解决不能修改父组件传递的数据的问题，
// 我们新增一个number保存父组件传递过来的数据，这样就可以修改数据的值了
data:function(){
return {
number: this.count
}
},
数据就可以修改了：
methods:{
handleclick:function() {
this.number=this.number+2;
this.$emit('change',2);//子组件向父组将传递参数，触发change事件
}
}
我们使用$emit触发chang方法，在父组件的模版中监听chang方法，最后在Vue实例中调用
（１）
this.$emit('change',2);//子组件向父组将传递参数，触发change事件
（２）
<counter :count="1" @change="handleIncreae"></counter>
（３）
var vm=new Vue({
el:'#shuju',
data:{
total:3
},
components:{
counter:counter
},
methods:{
handleIncreae:function(step) {
this.total+=step;
}
}
})
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>父子组件传值</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="shuju" >
<counter :count="2" @change="handleIncreae"></counter>
<counter :count="1" @change="handleIncreae"></counter>
<div>{{total}}</div>
</div>
<script>
var counter={
props:['count'],
//用data来解决不能修改父组件传递的数据的问题，
// 我们新增一个number保存父组件传递过来的数据，这样就可以修改数据的值了
data:function(){
return {
number: this.count
}
},
template:'<div @click="handleclick">{{number}}</div>',
methods:{
handleclick:function() {
this.number=this.number+2;
this.$emit('change',2);//子组件向父组将传递参数，触发change事件
}
}
};
var vm=new Vue({
el:'#shuju',
data:{
total:3
},
components:{
counter:counter
},
methods:{
handleIncreae:function(step) {
this.total+=step;
} }
})
</script>
</body>
</html>
效果：
2018-05-15 21:47:17
vue 父子组件传递数据的更多相关文章
- vue单文件组件形成父子（子父）组件之间通信（vue父组件传递数据给子组件，子组件传递数据给父组件）
看了很多文章,官网文档也有看,对父子组件通信说的不是很明白:决定自己总结一下: vue一般都使用构建工具构建项目:这样每个组件都是单文件组件:而网上很多文章都是script标签方式映入vue,组件通信 ...
- Vue基础-渲染函数-父子组件-传递数据
Vue 测试版本:Vue.js v2.5.13 做了个 demo,把父子组件的数据都绑定到 Vue 实例 app 上,注释中的 template 相对好理解些 <div id="app ...
- vue 子组件传递数据跟父组件
子组件 <body> <div v-on:click="test"></div> <script> export default { ...
- vue2中component父子组件传递数据props的使用
子组件使用父亲传过来的数据,我们需要通过子组件的 props 选项. 组件实例的作用域是孤立的,不能在子组件的模板内直接引用父组件的数据.修改父亲传过来的props数据的时候 父亲必须传递对象,否则不 ...
- vue父子组件传递参数之props
vue中父组件通过props传递数据给子组件, props有两种传递方式 1.props:['msg']2.props: { msg:{ type:String, default:"&quo ...
- vue兄弟组件传递数据
在main.js里面设置data{eventHub:new Vue() } new Vue({ el: '#app', router, store, template: '<App/>', ...
- Vue子组件传递数据给父组件
子组件通过this.$emit(event,data)传递数据到父组件 以下是例子: father.vue 父组件 <template> <div> <child @ne ...
- vue 父组件传递数据给子组件
父组件 <body> <div id="app"> <child v-bind:data = "test"></chi ...
- Vue父子组件通信（父级向子级传递数据、子级向父级传递数据、Vue父子组件存储到data数据的访问）
Vue父子组件通信(父级向子级传递数据.子级向父级传递数据.Vue父子组件存储到data数据的访问) 一.父级向子级传递数据[Prop]: ● Prop:子组件在自身标签上,使用自定义的属性来接收外界 ...
随机推荐
- 常用的一些js事件及案例
比如金额需要显示的时候转换成有千分位,小数点后保留2位等.去编辑的时候,又要格式化,把逗号都去掉.网上找了段代码,但是再次编辑会有问题,修改了一下,代码如下: function outputMoney ...
- python xlwt设置单元格的自定义背景颜色
我使用python 2.7和xlwt模块进行excel导出 我想设置我知道可以使用的单元格的背景颜色 style1 = xlwt.easyxf('pattern: pattern solid, for ...
- Spring mvc Hello World
Spring mvc Hello World 添加依赖 <dependency> <groupId>org.springframework</groupId> &l ...
- drop,delete与truncate的区别
drop直接删掉表 truncate删除表中数据,再插入时自增长id又从1开始 delete删除表中数据,可以加where字句. (1) DELETE语句执行删除的过程是每次从表中删除一行,并且同时将 ...
- css的3d注意事项
1,如果要写出立体效果,所有的父容器都要添加属性transform-style: preserve-3d;不然子元素不能进行3d变换:背景色要写到最外层容器,且不能有transform-style: ...
- typescript + vue开发遇到的坑
1,错误 :TS2304: Cannot find name 'require' 在ts使用nodejs,没有安装nodejs的TypeScript定义类型 ,使用require报的错 解决方法:如果 ...
- leetcood学习笔记-104-二叉树的最大深度
题目描述: 第一次提交: class Solution(object): def maxDepth(self, root): """ :type root: TreeNo ...
- Dubbo的初步理解和使用
Dubbo(读音[ˈdʌbəʊ])是阿里巴巴公司开源的一个高性能优秀的服务框架,使得应用可通过高性能的 RPC 实现服务的输出和输入功能,可以和 [1] Spring框架无缝集成. Dubbo是一款 ...
- Linux 系统分区与目录介绍
分区 分区类型 主分区:总共最多只能分四个 扩展分区: 只能有一个,也算作主分区的一种,也就是说主分区加扩展分区最多有四个. 但是扩展分区不能存储数据和格式化,必须再划分成逻辑分区才能使用. 逻辑分区 ...
- 【命令】Maven命令
当前项目的依赖树: mvn dependency:tree -U.-B.-e -U参数: 该参数能强制让Maven检查所有SNAPSHOT依赖更新,确保集成基于最新的状态,如果没有该参数,Maven默 ...