Vue3 子调父

原创已于 2023-06-14 18:15:34 修改 · 401 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue3

收录于

于 2021-07-28 11:54:10 首次发布

Vue3 专栏收录该内容

15 篇文章

订阅专栏

这篇博客探讨了Vue中父组件如何通过`<EmbroideryUnit>`组件触发`elDropdownItemfn`事件，并在子组件内部响应这个事件。子组件使用`setup`语法糖定义了一个名为`elDropdownItem`的回调函数，接收参数并调用`emit`传递事件到父组件。同时，子组件还定义了一个`clickChoice`函数，用于触发`editConfirm`事件，将当前值发送给父组件。文章深入解析了Vue中组件间通信的方法和实践。

父组件

<EmbroideryUnit @elDropdownItemfn='elDropdownItemfn'></EmbroideryUnit>

子组件


  setup(props, {emit}) {

    const elDropdownItem = (e,val,type) => {
      console.log("e:", e);
      emit("elDropdownItemfn", e,val,type);
    };
})

<script lang="ts" setup>
import { defineEmits } from 'vue'
const emit = defineEmits(['editConfirm'])

const clickChoice = (color,index) => {
 
  emit('editConfirm', current.value)
};
</script>