- 父组件通过属性的形式向子组件传值，子组件通过 props 接收
-
单向数据流：父组件可以随意的向子组件传递参数，但是子组件绝对不能反过来修改父组件传过来的参数。（如果父组件传过来的是引用类型数据，当子组件修改父组件传过来的值，有可能影响到其他也使用该引用类型数据的子组件）
- 子组件可以克隆（在子组件 data 中定义
son: this.parent ）出父组件传过来的参数进行修改
- 子组件通过触发（
this.$emit() ）父组件事件向外传值
<div id="app">
<!-- 父组件通过绑定属性 count 向子组件传值 -->
<counter :count="1" @watch="addCounts"></counter>
<counter :count="2" @watch="addCounts"></counter>
<div>{{total}}</div>
</div>
<script>
var counter = {
props: ["count"], // 子组件通过 props 接收父组件的传值
data: function(){ // 子组件中 data 必须是一个方法，不能是对象
return {
num: this.count // 通过克隆的方式修改父组件传值，即不直接修改父组件值（单向数据流）
}
},
template: "<div @click='add'>{{num}}</div>",
methods: {
add: function(){
this.num = this.num + 2
this.$emit("watch", 2) // 子组件通过 this.$emit() 触发父组件事件，第二个参数为所携带值
}
}
}
var vm = new Vue({
el: "#app",
data: {
total: 3
},
components: {
counter: counter
},
methods: {
addCounts: function(value){
// 此时 value 就是子组件通过 this.$emit() 传过来的第二个参数
this.total = this.total + 2
}
},
})
</script>
