时间戳

首页 > 解决方案 > Vue 3，$emit 永远不会触发

vue.js - Vue 3，$emit 永远不会触发

问题描述

文档不足以进行发射。我看过很多教程但没有任何效果，现在我正在测试这个

子组件

<div @click="$emit('sendjob', Job )"></div>

使用 Vue DevTools 插件，我可以看到数据是在 PayLoad 中发送的，但我找不到从其他组件接收此发射的方法。很多人这样做

任何其他组件

<template>
  <div @sendjob="doSomething"></div>
</template>
<script>
  export default {
     methods:{
        doSomething(){
           console.log('It works')
        }
     }
  }
</script>

就我而言，它不起作用

标签： vue.js

解决方案

您应该在父组件中导入子组件并使用它而不是常规div标签。

我正在分享示例供您参考，以使用<script setup>和 Composition API 在 Vue 3 中实现发射。<script setup如果您要在单文件组件中使用合成 API，我强烈建议您使用。然而，选择权在你。

示例<script setup>：https ://v3.vuejs.org/api/sfc-script-setup.html

<!-- App.vue -->
<template>
  <UserDetail @user-detail-submitted="userDetailSubmitted"/>
</template>

<script setup>
import UserDetail from './components/UserDetail';

function userDetailSubmitted(name) {
  console.log({ name })
}
</script>

<!-- UserDetail.vue -->
<template>
  <input type="text" v-model="name" @keyup.enter="$emit('user-detail-submitted', name)" />
</template>

<script setup>
import { ref } from 'vue';

const name = ref('');
</script>

使用组合 API 的示例：https ://v3.vuejs.org/api/composition-api.html

<!-- App.vue -->
<template>
  <UserDetail @user-detail-submitted="userDetailSubmitted"/>
</template>

<script>
import UserDetail from "./components/UserDetail";

export default {
  components: {
    UserDetail,
  },

  setup() {
    function userDetailSubmitted(name) {
      console.log({ name });
    }

    return {
      userDetailSubmitted
    }
  },
};
</script>

<!-- UserDetail.vue -->
<template>
  <input type="text" v-model="name" @keyup.enter="$emit('user-detail-submitted', name)" />
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const name = ref('');

    return {
      name,
    }
  }
}
</script>

推荐阅读