YouTip

The parent component uses props to pass data to child components, but if the child component needs to pass data back, it needs to use custom events! We can use v-on to bind custom events. Each Vue instance implements the Events interface, which means: * Use `$on(eventName)` to listen for events * Use `$emit(eventName)` to trigger events In addition, the parent component can directly use v-on to listen to events triggered by the child component where the child component is used. In the following example, the child component is completely decoupled from its outside. All it does is trigger an internal event that the parent component cares about. ## Example Vue.component('button-counter', { template: '{{ counter }}', data: function () { return { counter: 0 } }, methods: { incrementHandler: function () { this.counter += 1 this.$emit('increment') } }, }) new Vue({ el: '#counter-event-example', data: { total: 0 }, methods: { incrementTotal: function () { this.total += 1 } } }) [Try it »](#) If you want to listen to a native event on the root element of a component. You can use the .native modifier for v-on. For example: ### data Must Be a Function In the above example, you can see that the data in the button-counter component is not an object, but a function: data: function () { return { count: 0 }} The benefit of this is that each instance can maintain an independent copy of the returned object. If data is an object, it will affect other instances, as shown below: ## Example var buttonCounter2Data = { count: 0 } Vue.component('button-counter2', { /* data: function () { // data option is a function, components do not affect each other return { count: 0 } }, */ data: function () { // data option is an object, will affect other instances return buttonCounter2Data }, template: 'Clicked {{ count }} times.' }) new Vue({ el: '#components-demo3' }) [Try it »](#) * * * ## v-model on Custom Components The v-model on a component will use a prop named value and an event named input by default. Is equivalent to: In the following example, the custom component tutorial-input has an initial value of 100 for num in the parent component. Changing the value in the child component can update the parent component's num in real time: ## Example Vue.component('tutorial-input', { template: ` `, props: ['value'], // prop named value }) new Vue({ el: '#app', data: { num: 100, } }) [Try it »](#) Since v-model passes value by default, not checked, for checkbox or radio button components, we need to use the model option. The model option can specify the current event type and the incoming props. ## Example // Register Vue.component('base-checkbox', { model: { prop: 'checked', event: 'change' // onchange event }, props: { checked: Boolean }, template: ` ` }) // Create root instance new Vue({ el: '#app', data: { lovingVue: true } }) [Try it »](#) In the example, the value of lovingVue will be passed to the checked prop. At the same time, when triggers the change event, the value of lovingVue will also be updated.