Vue.js 組件 - 自定義事件

父組件是使用 props 傳遞數(shù)據(jù)給子組件，但如果子組件要把數(shù)據(jù)傳遞回去，就需要使用自定義事件！

我們可以使用 v-on 綁定自定義事件, 每個(gè) Vue 實(shí)例都實(shí)現(xiàn)了事件接口(Events interface)，即：

• 使用?$on(eventName)?監(jiān)聽(tīng)事件
• 使用?$emit(eventName)?觸發(fā)事件

另外，父組件可以在使用子組件的地方直接用 v-on 來(lái)監(jiān)聽(tīng)子組件觸發(fā)的事件。

以下實(shí)例中子組件已經(jīng)和它外部完全解耦了。它所做的只是觸發(fā)一個(gè)父組件關(guān)心的內(nèi)部事件。

實(shí)例

<div id="app"><div id="counter-event-example"><p>{{ total }}</p><button-counter v-on:increment="incrementTotal"></button-counter><button-counter v-on:increment="incrementTotal"></button-counter></div>
</div><script>
Vue.component('button-counter', {template: '<button v-on:click="incrementHandler">{{ counter }}</button>',data: function () {return {counter: 0}},methods: {incrementHandler: function () {this.counter += 1this.$emit('increment')}},
})
new Vue({el: '#counter-event-example',data: {total: 0},methods: {incrementTotal: function () {this.total += 1}}
})
</script>

如果你想在某個(gè)組件的根元素上監(jiān)聽(tīng)一個(gè)原生事件?？梢允褂?.native 修飾 v-on 。例如：

<my-component v-on:click.native="doTheThing"></my-component>

data 必須是一個(gè)函數(shù)

上面例子中，可以看到 button-counter 組件中的 data 不是一個(gè)對(duì)象，而是一個(gè)函數(shù)：

data: function () {return {count: 0}
}

這樣的好處就是每個(gè)實(shí)例可以維護(hù)一份被返回對(duì)象的獨(dú)立的拷貝，如果 data 是一個(gè)對(duì)象則會(huì)影響到其他實(shí)例，如下所示：

實(shí)例

<div id="components-demo3" class="demo"><button-counter2></button-counter2><button-counter2></button-counter2><button-counter2></button-counter2>
</div><script>
var buttonCounter2Data = {count: 0
}
Vue.component('button-counter2', {/*data: function () {// data 選項(xiàng)是一個(gè)函數(shù)，組件不相互影響return {count: 0}},*/data: function () {// data 選項(xiàng)是一個(gè)對(duì)象，會(huì)影響到其他實(shí)例return buttonCounter2Data},template: '<button v-on:click="count++">點(diǎn)擊了 {{ count }} 次。</button>'
})
new Vue({ el: '#components-demo3' })
</script>

---

自定義組件的 v-model

組件上的 v-model 默認(rèn)會(huì)利用名為 value 的 prop 和名為 input 的事件。

<input v-model="parentData">

等價(jià)于：

<input :value="parentData"@input="parentData = $event.target.value"
>

以下實(shí)例自定義組件 kxdang-input，父組件的 num 的初始值是 100，更改子組件的值能實(shí)時(shí)更新父組件的 num：

實(shí)例

<div id="app"><kxdang-input v-model="num"></kxdang-input><p>輸入的數(shù)字為:{{num}}</p>
</div>
<script>
Vue.component('kxdang-input', {template: `<p>   <!-- 包含了名為 input 的事件 --><inputref="input":value="value" @input="$emit('input', $event.target.value)"></p>`,props: ['value'], // 名為 value 的 prop
})new Vue({el: '#app',data: {num: 100,}
})
</script>

由于 v-model 默認(rèn)傳的是 value，不是 checked，所以對(duì)于復(fù)選框或者單選框的組件時(shí)，我們需要使用 model 選項(xiàng)，model 選項(xiàng)可以指定當(dāng)前的事件類(lèi)型和傳入的 props。

實(shí)例

<div id="app"><base-checkbox v-model="lovingVue"></base-checkbox> <div v-show="lovingVue"> 如果選擇框打勾我就會(huì)顯示。 </div>
</div> 
<script>
// 注冊(cè)
Vue.component('base-checkbox', {model: {prop: 'checked',event: 'change'  // onchange 事件},props: {checked: Boolean},template: `<inputtype="checkbox"v-bind:checked="checked"v-on:change="$emit('change', $event.target.checked)">`
})
// 創(chuàng)建根實(shí)例
new Vue({el: '#app',data: {lovingVue: true}
})
</script>

實(shí)例中 lovingVue 的值會(huì)傳給 checked 的 prop，同時(shí)當(dāng) <base-checkbox> 觸發(fā) change 事件時(shí)， lovingVue 的值也會(huì)更新。