在vue中，父组件往子组件传递参数都是通过属性的形式来传递的
<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>需求，在子组件被点击的时候＋1，我们可能会这么写
var counter = { props:[‘count‘], template:‘<div @click="handleClick">{{count}}</div>‘, methods:{ handleClick:function(){ this.count ++ } }}这个时候页面上看上去是正常的，但是控制台会报错，为什么呢？
在vue中有个单向数据流的概念，也就是父组件可以向子组件传递参数，通过属性传，传递的参数可以随便的进行修改，但是反过来，子组件绝对不能去修改父组件传递过来的参数，只能用这个内容，但是不能修改这个内容
之所以vue中有这个单向数据流的概念，原因在于，一旦子组件这个接收的数据并不是基础类型的数据，而是一个引用数据的时候，在子组件改变了数据，又可能接收的这个内容还被其他的组件所使用，这样不仅仅改了自身的数据，还会对其他对组件造成影响，所以vue中有个单向数据流，子组件不能改变父组件传递过来对数据
那么，这里确实要改变这个count的值，现在不让我改，那要怎么实现这个功能呢？
var counter = { props:[‘count‘], data:function(){ return { number:this.count } }, template:‘<div @click="handleClick">{{number}}</div>‘, methods:{ handleClick:function(){ this.number ++ } }}这样实现，将父组件传递过来的参数赋值给子组件的number，再使用子组件自己的数据的时候，是可以进行更改的，而且也不会影响到父组件的数据
子组件如何向父组件传递参数
通过事件触发的方式，$emit
<div id=‘root‘> <counter :count = ‘3‘ @change = ‘handleChange‘></counter> <counter :count = ‘2‘ @change = ‘handleChange‘></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 += 2; this.$emit(‘change‘,2); } }}var vm = new Vue({ el:‘#root‘, data:{ total:5 }, components:{ counter: counter }, methods:{ handleChange:function(step){ this.total += step; } }})vuejs父子组件的数据传递
原文地址：https://www.cnblogs.com/wzndkj/p/9650398.html