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>