vue emit是vue.js中傳遞數據的一種方式,它可以將數據從一個組件傳遞到另一個組件中。而emit冒泡則是emit的一種用法,它可以讓子組件將數據向上傳遞給父級或更高級別的組件。下面我們來看一下具體的實現過程。
首先,在子組件中使用$emit方法觸發自定義事件,并傳遞需要傳遞的數據:
Vue.component('child', {
data: function () {
return {
message: 'hello vue'
}
},
methods: {
sendMsg() {
this.$emit('change', this.message)
}
},
template: ''
})
可以看到,這里我們定義了一個名為“change”的自定義事件,并且將message數據作為參數傳遞給它。
接下來,在父組件中使用v-on指令監聽“change”事件,并將觸發該事件時傳遞的數據保存到父組件中的一個變量中:
Vue.component('parent', {
data: function () {
return {
msgFromChild: ''
}
},
template: 'Message from Child: {{ msgFromChild }}
'
})
在這段代碼中,我們使用了“$event”來接收子組件傳遞過來的數據,并將其保存到了msgFromChild變量中。
最后,將子組件和父組件進行組合:
<div id="app">
<parent></parent>
</div>
通過以上代碼,我們實現了子組件向父組件冒泡傳遞數據的功能。需要注意的是,emit默認是不會冒泡的,只有在定義自定義事件時設置了“EventConstructor.bubbles=true”才能實現。而在vue.js中,所有自定義事件默認都是不會冒泡的,需要手動設置bubbles屬性才行。