vue2.0子组件向父组件传递数据（饿了么例子）vue2.0废弃$dispatch,替换成$emit 和$refs
vue2.0废弃$dispatch,替换成$emit 和$refs，使用方法如下（根据慕课饿了么案例，教程上的写法要改［为了购物车小球抛下的动画］）：//goods.vue组件－－使用v-on监听"cartcontrol-wrapper"> "food" v-on:cart-add="cartAdd">在methods添加
·
vue2.0废弃$dispatch,替换成$emit 和$refs，使用方法如下（根据慕课饿了么案例，教程上的写法要改［为了购物车小球抛下的动画］）：
// goods.vue组件－－使用v-on监听
<div class="cartcontrol-wrapper">
<cartcontrol :food="food" v-on:cart-add="cartAdd"></cartcontrol>
</div>
在methods添加cartAdd函数
// 监听v-on:cart-add="cartAdd"，购物车组件如果提交了'cart-add'事件就调用这个cartAdd函数，this.$emit('cart-add', event.target);
这句提交名为'cart-add'的事件给父组价．
methods: {
cartAdd(el) {
// dom元素更新后执行， 因此此处能正确打印出更改之后的值；
}
|
|
1
2
|
good.vue // v-el的写法在vue2.0中已经废弃，现在全部采用 ref和$ref
绑
定Dom节点元素
<shopcart ref="shopcart" :select-foods="selectFoods" :delivery-price="seller.deliveryPrice" :min-price="seller.minPrice"></shopcart>
|
|
1
2
3
4
5
6
7
8
9
10
11
|
// cartcontrol.vue组件
addCart(event) {
if (!event._constructed) {
return;
}
if (!this.food.count) {
Vue.set(this.food, 'count', 1);
} else {
this.food.count++;
}
this.$emit('cart-add', event.target); //添加这句，提交'cart-add'事情给父组件，第二个是要传递的参数
},// cartcontrol.vue组件
|
|
1
2
3
4
5
|
// shopcart.vue组件的drop（）函数
methods: {
drop(el) {
console.log(el);
}
}// shopcart.vue组件
|
子组件向父组件传递过程梳理：
目标：把自组件cartcontrol的addCart（）里用this.$emit('cart-add',event.target)这句，获取并把添加按钮这个ＤＯＭ元素以'cart-add'名字传递给父组件good.vue,
传给父组件good.vue，父组件里面的
<cartcontrol :food="food" v-on:cart-add="cartAdd"></cartcontrol>用v-on:cart-add="cartAdd" 表示监听传来的cart-add事件，监听到就调用cartAdd()函数处理，
cartAdd()函数里这句this.$refs['shopcart'].drop(el);调用shopcart组件的drop()函数
shopcart.vue组件的函数是打印出当前参数．
前往低代码交流专区
更多推荐
2
0- 0
已为社区贡献8条内容
所有评论(0)