前言:组件间总是会有,数据进行传递的情况,父组件->子组件,子组件->父组件。下面具体说一下用法
第一种:父组件->子组件
父组件通过 :area 方式,将 areaData 的数据传递给子组件。
<div id="todo-list-example">
<item :cons="5"></item>
<item :cons="3"></item>
</div>
<script>
Vue.component('item', {
props:['cons'],
data: function(){
return{
number: this.cons
}
},
template: '<div @click="handleClick">{{number}}</div>',
methods:{
handleClick:function(){
this.cons += 1 //子组件操作父组件传递的值会报错
this.number += 1 //正确用法
}
}
})
</script>
子组件通过 props接收 父组件传递的数据。
单项数据流,就是子组件可以接收父组件传递的数据,但不能修改。为了避免污染数据源,因为父组件传递的数据也可能被其他子组件所使用。 我们可以将接收到的数据赋值给其他参数,进行修改。
操作父组件传递的数据报错:
报错翻译:避免直接修改prop,因为当父组件重新渲染时,该值将被覆盖。推荐使用:基于道具值的数据(赋值)或计算属性。
:cons 和 cons 的区别
在上边的实例中,使用两种形式都可以满足需求。:cons 是 v-bind:cons 的简写,告知 v-bind 指令,将 cons 属性与“=”后的js表达式绑定。 cons 则不会响应式的更新数据。
第二种:子组件 -> 父组件
子组件通过 this.$emit('方法名','数据') 将数据传递给父组件
父组件执行 @change="handleChange",handleChange 方法的参数 step,就是子组件传递过来的数据。
<div id="todo-list-example">
<item @change="handleChange" :cons="5"></item>
<item @change="handleChange" :cons="3"></item>
<div>{{message}}</div>
</div>
<script>
Vue.component('item', {
props:['cons'],
data: function(){
return{
number: this.cons
}
},
template: '<div @click="handleClick">{{number}}</div>',
methods:{
handleClick:function(){
this.number += 2
this.$emit('change', 2)
}
}
})
var vm= new Vue({
el: '#todo-list-example',
data: {
message: 8,
},
methods:{
handleChange:function(step){
this.message += step
}
}
})
</script>
this.$emit('change', max, min,…) 参数个数没有限制
以上。