vue中的子传父事件

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进行事件传递,在子组件中 emit,emit中的submitMetadata,要和父组件中开始定义对应才可以

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue子组件向父组件传递动态事件监听可以通过自定义事件实现。 首先,在子组件定义一个方法,用来触发要传递给父组件的事件。可以使用`this.$emit()`方法来触发自定义事件,并传递需要传递给父组件的数据。 ```javascript <template> <button @click="triggerEvent">点击触发事件</button> </template> <script> export default { methods: { triggerEvent() { // 传递数据给父组件 this.$emit('custom-event', '这是子组件传递给父组件的数据'); } } }; </script> ``` 接下来,在父组件使用子组件,并在父组件监听子组件触发的自定义事件。可以使用`@custom-event`来监听子组件触发的事件,并在对应的方法处理子组件传递过来的数据。 ```javascript <template> <div> <p>接收到的数据:{{ eventData }}</p> <child-component @custom-event="handleCustomEvent"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { eventData: '' }; }, methods: { handleCustomEvent(data) { // 处理子组件传递过来的数据 this.eventData = data; } } }; </script> ``` 在父组件使用`<child-component>`标签引入子组件,并使用`@custom-event`来监听子组件触发的事件。在`handleCustomEvent`方法,可以获取到子组件传递过来的数据,并进行相应的处理。 这样子组件就可以通过自定义事件将数据传递给父组件,并由父组件进行相应的处理了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值