Vue.js 2.0中的dispatch()方法可以用于向祖先組件派發(fā)一個(gè)自定義事件,傳遞參數(shù)并在其它組件中監(jiān)聽該事件。該方法的語法如下:
this.$parent.$emit('custom-event', data)
這里的$parent指向當(dāng)前組件的父組件,而$emit()是Vue實(shí)例中定義的方法,用于觸發(fā)一個(gè)事件。該事件應(yīng)該在父組件中注冊監(jiān)聽器,并定義方法處理子組件傳遞的數(shù)據(jù)。
假設(shè)我們有一個(gè)父組件和一個(gè)子組件,需要在子組件中調(diào)用dispatch()方法向父組件傳遞數(shù)據(jù)。我們首先需要在子組件中定義一個(gè)觸發(fā)方法,如下所示:
methods: { handleClick() { this.$parent.$emit('custom-event', 'Hello World!') } }
在父組件中,我們需要定義一個(gè)監(jiān)聽器來響應(yīng)子組件的事件觸發(fā)。可以使用v-on指令來注冊該事件,語法如下:
<template> <div> <child-component v-on:custom-event="handleCustomEvent"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent' export default { components: { ChildComponent }, methods: { handleCustomEvent(data) { console.log(data) } } } </script>
這里我們可以看到,在父組件中我們通過v-on指令來監(jiān)聽子組件的自定義事件,并在handleCustomEvent()方法中處理子組件傳遞的數(shù)據(jù)。
最后,我們需要注意的是,在組件樹中,如果存在多層嵌套的子組件,那么我們可能需要多次調(diào)用dispatch()方法來將數(shù)據(jù)傳遞給更上一級的父組件。例如,在子組件中調(diào)用以下代碼:
this.$parent.$parent.$emit('custom-event', data)
這樣可以將數(shù)據(jù)派發(fā)給祖先組件的父組件。但是,在實(shí)際應(yīng)用中,最好避免使用多層嵌套的子組件結(jié)構(gòu),以免出現(xiàn)代碼復(fù)雜、可維護(hù)性低等問題。