vue中的子传父事件

原创于 2021-07-07 15:55:16 发布 · 326 阅读

CC 4.0 BY-SA版权

文章标签：

本文详细介绍了在Vue中如何实现父子组件之间的事件传递。通过在父组件定义监听方法`updatePlant`，并在子组件中使用`$emit`触发`submitMetadata`事件，实现了从子组件向父组件的数据通信。这一过程对于理解Vue的组件通信机制至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue当中的父子事件传递:
在父组件:

    <el-tab-pane label="运行状态" name="status">
    
            <eStatus 
              :product-info="detail"
              :newStatus="newStatus"
              @submitMetadata="**updatePlant**"  
            />

          </el-tab-pane>

然后定义事件:事件名和上面方法对应

methods:{
  **updatePlant**(item) {
      console.log(item);
      this.initOrder();
    },
}

然后是子组件:在需要定义的地方定义事件

 <span @click="gengXin()">
              <svg-icon icon-class="gengxin" class="gengxin"
            /></span>

然后再事件中

methods:{
 gengXin() {
        this.$emit('submitMetadata',true)
    },
}

其实主要是运用了 $e m i t 进行事件传递, 在子组件中$ emit中的submitMetadata,要和父组件中开始定义对应才可以