父子组件间的传值
Posted tengteng0520
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了父子组件间的传值相关的知识，希望对你有一定的参考价值。
父子组件间通信
父组件-->子组件
1.父组件通过给子组件添加属性给子组件传值，子组件通过props来接受。
2但是要在属性前加“：”，即使用v-bind指令，才能使属性值是js代码，不然就是字符串。
3.单项输出流。即子组件不允许修改父组件传递的值，只能使用，不能修改。
父组件通过属性向子组件传值时，如果传递的是引用型的值，这时候子组件对父组件传递的值进行修改可能会影响其他子组件对这个引用类型值的使用。
解决办法：子组件在data项中新赋值父组件的变量，操作新的变量即可。
子组件-->父组件
通过事件this.$emit(‘方法名‘，参数)
父组件监听子组件传递的事件 @事件名
<body>
<div id="root">
<counter :count="3" @inc="handleIncrease"></counter>
<counter :count="2" @inc="handleIncrease"></counter>
<div>{{total}}</div>
</div>
<script>
var counter={
props:[‘count‘],
data:function(){
return {
number:this.count
}
},
template:‘<div @click="handleClick">{{number}}</div>‘,
methods:{
handleClick:function(){
this.number=this.number+2;
this.$emit(‘inc‘,2)
}
}
}
var vm=new Vue({
el:‘#root‘,
data:{
total:5
},
components:{
counter:counter
},
methods:{
handleIncrease:function(step){
this.total+=step
}
}
})
</script>
</body>
以上是关于父子组件间的传值的主要内容，如果未能解决你的问题，请参考以下文章