Vue 3, $emit never firing-CodePudding

The documentation is not enough to be able to do the emit. I have seen many tutorials and nothing works, now I am testing this

Child component

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

With the Vue DevTools plugin I can see that the data is sent in the PayLoad, but I can't find a way to receive this emit from the other component. Many people do this

Any other component

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

In my case it doesn't work

CodePudding user response：

You should import this child-component in the parent. And don't rename it to the html's original tag.vue3. You'd better use the Composition API.

CodePudding user response：

You should import the child component in the parent component and use it instead of the regular div tag.

I'm sharing examples for your reference to achieve emits in Vue 3 using <script setup> and Composition API. I strongly suggest going with <script setup if you are going to use Composition API in Single File Component. However, the choice is yours.

Example with <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>

Example using Composition 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>