1.父组件向子组件传值
父组件通过props的方式向子组件传值
2.子组件向父组件传值
子组件通过$emit的方式向父组件传值
$emit绑定一个自定义事件, 当这个语句被执行时, 就会触发事件并将参数传递给父组件,父组件通过v-on监听并接收参数。
3.Vue有一个特性——单向数据流
父组件可以向子组件传递数据，子组件只能接收，但不能直接修改，可以通过拷贝一个数据的副本进行修改。
举个栗子：
假如，有个慷慨的父组件想把100w传给他的子组件，这是完全ojbk的！
那这个接收到了100w的子组件只能够去用它，而不能去改它。（给你多少就是多少，想往后边加了零？门都没有！）
而之所以Vue有这个单项数据流的概念，原因在于：一旦你的子组件接收到的数据并不是一个基础类型的数据，而是一个类似于object对象（也就是引用形式的数据）的时候，在子组件里面改变了这个数据里的一些内容，还有可能对其他的子组件造成影响。因为接收的这个引用型的数据可能还被其他的子组件使用着，你一改，可能就全改了。
Vue说：“我有一个单向数据流，你子组件不能改变父组件的数据。”
那如果我硬要改呢？[狗头]
其实我们可以在子组件里定义一个data（一定得是一个函数，并且return一个对象）
把父组件传来的数据copy一份，放到我子组件自己的data里面。这样的话，值是我自己的，我就可以去改我自己的值，完全符合科学道理化学物理。。perfect！
kangkang示例代码：
<body>
<div id="root">
<counter :count='1' @change="handleChange"></counter>
<counter :count='1' @change="handleChange"></counter>
<!-- 加了冒号，后边接的就是js表达式，会自动转换为数字类型；
不加冒号的话，“1”就是个普通的字符 -->
<div>{{total}}</div>
</div>
<script>
// 父组件通过属性的形式，向子组件counter传递了一个名叫count的数据，子组件需要通过props来接收，并直接在模板中使用
var counter = {
props:['count'],
template:'<div @click="handleClick">{{number}}</div>',
data(){
return {
number:this.count
}
},
methods: {
handleClick(){
this.number = this.number+1
this.$emit('change',1)
// 子组件通过$emit触发事件，回调给父组件
// 1表示步长
}
},
}
var vm = new Vue({
el:"#root",
components:{
counter:counter
},
data:{
total:2
},
methods:{
handleChange(step){
this.total+=step
}
}
})
</script>
</body>
5909
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
