parent-child-vue-2.js

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>
    `
})

parent-child-vue-3.js

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>
    `
})