[Vuejs]-Send data from component to child component in vue 3

by

1👍

UPDATE 2

In the setup() function, you have to use Composition API

With Composition API you get the emit function in the setup() over the Setup Context.

Check my first sample:

You get the emit function over

setup(props, { emit })

and use it then directly

emit("registers", getCall(toRef(param_search,'param_search')))

In your case you pass the Setup Context, so you can call emit over context

context.emit("registers", getCall(toRef(param_search,'param_search')))

It looks like you don’t really need to define your custom event, but I would still recommend it:

emits: ['registers']

Note that, the this.$emit() call is used by Options API, and not Composition API

const { createApp, ref } = Vue;

const MyComp = {
  setup(props, { emit }) {
    const emitMyEvent = (event) => emit('registers', event);
    return { emitMyEvent }
  },
  template: `<button id="my-button" @click="emitMyEvent">emit</button>`
}

const App = { 
  components: { MyComp },
  setup() {
    const getCall = (event) => console.log('getCall(): ' + event.target.id);
    return { getCall }
  }
  
}
const app = createApp(App)
app.mount('#app')
#app { line-height: 2; }
[v-cloak] { display: none; }
<div id="app" v-cloak>
  <my-comp @registers="getCall"></my-comp> 
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

UPDATE

The same with Options API using this.$emit

const { createApp, ref } = Vue;

const MyComp = {
  emits: ['registers'],  
  methods: {
    emitMyEvent: function(event) { this.$emit('registers', event) }
  },
  template: `<button id="my-button" @click="emitMyEvent">emit</button>`
}

const App = { 
  components: { MyComp },
  methods: {
    getCall: (event) => console.log('getCall(): ' + event.target.id)
  } 
}
const app = createApp(App)
app.mount('#app')
#app { line-height: 2; }
[v-cloak] { display: none; }
<div id="app" v-cloak>
  <my-comp @registers="getCall"></my-comp> 
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

Leave a comment