vue父子之间传值 子组件向父组件传值或父组件向子组件传值

1、父组件向子组件传值

使用prop
在子组件中定义

props: {
    visible: {
      type: Boolean,
      default: false
    },
    ShopListData: {
      type: Array,
      default: function() {
        return [];
      }
    }
  },

在父组件中接收组件

<YpcModal v-model="dialogTableVisible" @Add="handleAddShopRow" :ShopListData="ShopListData"  @delete="handleDeleteItem" />

注意在传值的过程中可能会遇到要传的值是接口返回的数据，在一次渲染组件的时候可能请求数据的接口还没有请求成功，所以在子组件里要做监听事件

 watch: {
    ShopListData: function(val) {
        this.ShopListData = val
        console.log(this.ShopListData, " this.S33hopListData")
}

2、子组件向父组件传值

最常用的就是emit
比如删除商品操作
在子组件中

 // 删除商品操作
    handleClickDelete(row) {
      this.AddShopList = this.AddShopList.map((item) => (item.id == row.id ? { ...item, action: 'add' } : item));
      this.$emit('delete', row);
    },

在子组件完成删除某个商品的时候，要把这个值告诉父组件，所以要把这个事件抛出来，使用$emit(‘触发事件’，传的值)
在父组件中接收这个值

 <YpcModal v-model="dialogTableVisible" @Add="handleAddShopRow" :ShopListData="ShopListData"  @delete="handleDeleteItem" />

 // 删除商品
    handleDeleteItem(row) {
      this.ShopListData = this.ShopListData.filter((item) => item.id != row.id);
    },

在子组件完成删除操作的时候，紧接着就会触发父组件完成删除操作