Vue 中的 emit() 函數(shù)可以讓我們在組件中發(fā)送自定義事件,以便其他組件監(jiān)聽并做出響應(yīng)。但如何獲取 emit 函數(shù)發(fā)送的參數(shù)呢?
這里有兩種方法:
<!-- 第一種方法:通過 $emit() 發(fā)送參數(shù)并在接收組件中獲取 -->
<!-- 發(fā)送組件 -->
methods: {
sendData() {
this.$emit('custom-event', 'hello, world');
}
}
<!-- 接收組件 -->
mounted() {
this.$on('custom-event', (data) => {
console.log(data); // hello, world
});
}
<!-- 第二種方法:使用 .sync -->
<!-- 發(fā)送組件 -->
<template>
<child-component :greeting.sync="greeting"></child-component>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
greeting: 'hello, world'
}
}
}
</script>
<!-- 接收組件 -->
<template>
<div>{{ greeting }}</div>
</template>
<script>
export default {
props: {
greeting: {
type: String,
default: 'hi'
}
},
model: {
prop: 'greeting',
event: 'update:greeting'
}
}
</script>
以上是兩種獲取 emit 函數(shù)參數(shù)的方法,在實(shí)際開發(fā)中可以根據(jù)需要選擇使用哪種。如果有其他更好的方法,歡迎各位大佬指點(diǎn)。