props父与子页面传值+子元素触发父级元素点击事件

   data() {
      return {
        goods: [],
        listHeight: [],
        scrollY: 0,
        selectedFood: {},
        pink:"pig",
      };
    },

//定义一个pink值

:red="pink"

传入

 props:["food","red"],   // 从父元素获取值

  console.log(this.red);  // pig

、、、、、、、、、、、、、、、、、、、、、、、、、props分割线、、、、、、、、、、、、、、、、、、、、、、、、、

 this.$emit('add', event.target);  //子元素传值

<cartcontrol :food="items" @add="addFood"></cartcontrol>  //父组件取值并且使用

 addFood(target) {    this._drop(target);   },   // 监听子元素的add事件,执行addFodd函数

   _drop(target) {            //执行该函数
        // 体验优化,异步执行下落动画
        this.$nextTick(() => {
          this.$refs.shopcart.drop(target); // 父组件访问子组件的方式,调用子组件的方法,传值
        });
      },

、、、、、、、、、、、、、、、、、、、、、、点击分割线、、、、、、、、、、、、、、、、、、、、、、、、、、、、、

      Vue.set(this.food,'count',1);  改变值

猜你喜欢

转载自blog.csdn.net/qq_38674970/article/details/81263170