父组件向子组件传递数据
Vue中的父组件要想向子组件传递值的化需要通过属性的方式传递
<body> <div id="root"> <counter :count="1"></counter> <counter :count="2"></counter> </div> <script> var counter={ props:["count"], template:"<div>{{count}}</div>" } var vm=new Vue({ el:"#root", components:{ counter:counter } }) </script> </body>
就像这样 在父组件上绑定一个count属性,子组件通过props来接收count属性所传递的值,然后通过插值表达式插入到子组件内
当我们想操作传递过来的数据的时候,我们就要注意了父组件传递给子组件数据时,因为单向数据流的关系,子组件是不能直接修改传递的数据的那我们要怎么办呢?
var counter={ props:["count"], data:function(){ return { number : this.count } }, template:"<div @click=‘handleClick‘>{{number}}</div>", methods:{ handleClick:function(){ this.number++ } } }
我们可以在子组件定义一个number来接这个count,我们直接去操作这个number就可以不影响父组件了
子组件向父组件传递数据
子组件向父组件传递数据是通过事件的方式,父组件通过监听这个事件,就可以获取数据了
handleClick:function(){ this.number++ this.$emit("change",1) }
我们通过$emit 向外触发一个事件,而且这个事件后面可以携带一个或者多个参数
然后我们在父组件绑定一个事件 ,这个事件名就是$emit向外触发的事件.
<div id="root"> <counter :count="0" @change="handleChange"></counter> <counter :count="0" @change="handleChange"></counter> <div>{{total}}</div> </div>
然后我们去根组件里面绑定这个事件
handleChange:function(e){ this.total+=e }
这个e就是前面change事件携带的参数,我们就完成了子组件向父组件传递数据
原文：https://www.cnblogs.com/baiyujingi/p/10342323.html