vue.js父子组件之间的数据通信，细节总结
隐性规则：单行数据流
学前疑问：
1.父组件如何向子组件通信数据？2.父组件可以直接修改子组件的数据！但是反过来绝对不可以！那怎么解决这个问题呢...
vue.js父子组件之间的数据通信，细节总结
隐性规则：单行数据流
学前疑问：
1.父组件如何向子组件通信数据？
2.父组件可以直接修改子组件的数据！但是反过来绝对不可以！那怎么解决这个问题呢？
3.所谓的单向数据流，就是约束子直接改父，以避免上述情况的发生！
4.子组件如何向父组件通信数据？
要点简介：
1.父组件都是通过属性 的方式向子组件传递数据 的！
2.父组件可以直接修改子组件的数据！反之，绝对不可以！
3.子组件都是通过事件触发的方式，向父组件通信数据的！
4.父子组件之间通信数据的隐性规定：就是“ 单向数据流 ”！
重要代码示下：
<body>
<div id="app">
<counter :count="4" @change="handleIncrease"></counter>
<counter :count="6" @change="handleIncrease"></counter>
<div>{{total}}</div>
</div>
<script>
//定义子组件
var counter = {
props: ['count'],//接受父组件的什么内容？属性内容！
data: function() {
return {
number: this.count
}
},
template: '<button @click="handleClick">{{number}}</button>',
methods: {
handleClick: function() {
this.number ++;
this.$emit('change', 1); //自定义事件名称change，携带的参数为1
}
}
}
//父组件
var app = new Vue({
el: '#app',
data: {
total: 10
},
components: {
counter: counter
},
methods: {
handleIncrease: function(step) {
this.total += step;
}
}
})
</script>
</body>
注意上述代码，记住几点：
父组件：都是通过属性的方式向子组件传递数据的！
子组件：定义属性number复制父组件数据，再通过事件触发的方式，完成向父组件通信数据。
，表示传递 ，表示传递 以上就是关于 “ vue.js踩坑之单向数据流 ” 的全部内容。
