Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Vue.component('child', {
data () {
return {
carBrand: 'Hyundai'
}
},
methods: {
emitShowCarBrand() {
this.$emit("showCarBrand", this.carBrand)
}
},
template: `
<div>
<h2>Emitir eventos con Vue 2</h2>
<p>{{ $parent.parentData }}</p>
<p @click="$emit('showCarBrand', carBrand)">
Emitir un evento al componente Parent desde la template
</p>
<p @click="emitShowCarBrand">
Emitir un evento al componente Parent desde el setup
</p>
</div>
`
});
Vue.component('parent', {
data() {
return {
parentData: "Datos del componente padre",
}
},
methods: {
eventReceived(cardBrand) {
console.log(cardBrand);
}
},
template: `
<div>
<h2>Comunicación a través de eventos padre hijo en Vue 3</h2>
<child @showCarBrand="eventReceived"></child>
</div>
`
})
app.component("child", {
emits: ['showCarBrand'],
setup(props, { emit }) {
const carBrand = ref("Hyundai");
const emitShowCarBrand = () => {
emit("showCarBrand", carBrand.value)
}
return { carBrand, emitShowCarBrand };
},
template: `
<h2>Emitir eventos con Vue 3</h2>
<u>{{ $parent.parentData }}</u>
<p @click="$emit('showCarBrand', carBrand)">
Emitir un evento al componente Parent desde la template
</p>
<p @click="emitShowCarBrand">
Emitir un evento al componente Parent desde el setup
</p>
`
})
app.component('parent', {
setup() {
const parentData = ref("Datos del componente padre");
const eventReceived = (cardBrand) => {
console.log(cardBrand);
}
return { parentData, eventReceived };
},
template: `
<h2>Comunicación a través de eventos padre hijo en Vue 3</h2>
<child @showCarBrand="eventReceived"></child>
`
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment