Challenge 1 / 1

Imagine we have a component that takes a value from the user and emits an event when the user changes it:

<template>
    <input
        :value="pizza.name"
        @input="updatePizzaName"
    />
</template>

<script>
export default {
    name: 'PizzaNameInput',
    props: {
        pizza: {
            type: Object,
            required: true,
        },
    },
    methods: {
        updatePizzaName($event) {
            this.$emit('update-pizza-name', { name: $event.target.value });
        },
    },
};
</script>

From its parent component, I want to re-emit this event so that I can handle it further up the component tree!

What is the best way of doing this?

<pizza-name-input @update-pizza-name="$emit('update-pizza-name', $event)" />

<template>
    <pizza-name-input @update-pizza-name="updatePizzaNameParent" />
</template>

<script>
export default {
    name: 'ParentComponent',
    methods: {
        updatePizzaNameParent($event) {
            this.emit('update-pizza-name', $event);
        },
    },
};
</script>

<pizza-name-input @update-pizza-name="$emit('update-pizza-name-parent', $event)" />

<pizza-name-input @update-pizza-name="function() { $emit('update-pizza-name', $event); }" />

Rewatch the video