父组件向子组件传递数据——父组件通过属性的形式向子组件传递数据
子组件通过props形式接受父组件传来的数据。
<body>
<div id="app">
<counter :count="0"></counter>
<counter :count="1"></counter>
</div>
<script>
var counter = {
props: ['count'],
template: '<div>{{count}}</div>',
};
var vm = new Vue({
el: "#app",
components: {
counter:counter
}
});
</script>
</body>
父组件通过属性的形式向counter子组件传递了一个叫count的数据，子组件通过props接受count这个属性的内容。这样在子组件的模板里面就可以直接来使用count。
（单向数据流：父组件可以向子组件传递任何数据，子组件不能改变父组件的数据）父组件可以随意向子组件传递参数，子组件绝对不能随便修改子组件传递过来的参数。举例来说，如果父组件自身有个数据是3，过一会变成4传给子组件，这是没有任何问题的。但是，传给了子组件之后，子组件接受了父组件传递过来的内容，子组件只能够使用这个内容，不能够去修改这个内容。之所以Vue中有这个单向数据流的概念，原因在于，一旦你的count接受的不是基础类型的数据，而是类似于object这样的引用形式的时候，你在子组件里改变了传递过来的数据内容，有可能接受的子组件数据还被其他子组件使用，这样的话，你这个子组件改变了数据，还可能对其他子组件造成影响。
<body>
<div id="app">
<counter ref="one" @change="handleChange" :count="3"></counter>
<counter ref="two" @change="handleChange" :count="2"></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.$emit('change',1);
}
}
};
var vm = new Vue({
el: "#app",
components: {
counter:counter
},
data: {
total: 5,
},
methods: {
handleChange: function() {
this.total = this.$refs.one.number + this.$refs.two.number;
}
}
});
</script>
</body>
子组件通过事件触发的形式向父组件传值。emit（）
