前言

在Vue中，this.$emit()方法用于觸發(fā)自定義事件。它是Vue實(shí)例的一個(gè)方法，可以在組件內(nèi)部使用。

使用this.$emit()方法，你可以向父組件發(fā)送自定義事件，并傳遞數(shù)據(jù)給父組件。父組件可以通過(guò)監(jiān)聽(tīng)這個(gè)自定義事件來(lái)執(zhí)行相應(yīng)的邏輯。

下面是一個(gè)簡(jiǎn)單的示例，展示了如何在Vue組件中使用this.$emit()方法：項(xiàng)目文件夾下該組件定義路徑 E:\myproject\src\components\ChildComponent\index.vue

子組件 index.vue

<template>
    <button @click="handleButtonClick">點(diǎn)擊觸發(fā)事件</button>
</template>
<script>
export default {
    name:'ChildComponent',
    methods: {
        handleButtonClick() {
            // 觸發(fā)自定義事件，并傳遞數(shù)據(jù)給父組件
            this.$emit('custom-event', 'Hello, World!');
        }
    }
}
</script>  

在上面的示例中，當(dāng)按鈕被點(diǎn)擊時(shí)，handleButtonClick方法會(huì)被調(diào)用。在該方法中，我們使用this.$emit()方法觸發(fā)了一個(gè)名為custom-event的自定義事件，并傳遞了字符串’Hello, World!'作為數(shù)據(jù)。

父組件可以通過(guò)監(jiān)聽(tīng)custom-event來(lái)接收這個(gè)自定義事件，并執(zhí)行相應(yīng)的邏輯。例如，在父組件中可以這樣監(jiān)聽(tīng)并處理這個(gè)事件：

父組件 table.vue

<template>
	<el-row>
		<el-col :span="24">
			<el-card>
				<el-table...>
						...
				</el-table>
			</el-card>
		</el-col>
	<el-row>
	<div>
		<child-component @custom-event="handleCustomEvent"></child-component>
	</div>
</template>
// 在父組件中導(dǎo)入子組件
import ChildComponent from '@/components/ChildComponent'
<script>
export default {
    name: 'App',
    data() {
        return {
        }
    }, 
    // 注冊(cè)子組件
    components: {
        ChildComponent
    },   
    methods: {
	    handleCustomEvent(data) {
	      // 處理自定義事件的邏輯
	      console.log(data); // 輸出：'Hello, World!'
	    }
   	}

父組件通過(guò)@custom-event監(jiān)聽(tīng)了custom-event自定義事件，并在handleCustomEvent方法中處理了這個(gè)事件。當(dāng)子組件中的this.$emit(‘custom-event’, ‘Hello, World!’)被觸發(fā)時(shí)，父組件的handleCustomEvent方法會(huì)被調(diào)用，并且傳遞的數(shù)據(jù)’Hello, World!'會(huì)被打印出來(lái)。

注： 

通過(guò)在components選項(xiàng)中注冊(cè)子組件，可以在父組件的模板中使用該子組件。在這個(gè)例子中，父組件可以通過(guò)以下方式在模板中使用ChildComponent：

<template>
  <div>
    <child-component></child-component>
  </div>
</template>

子組件在模板中使用時(shí)需要使用短橫線命名法（kebab-case），而在組件定義中使用駝峰命名法（camelCase）。你可以在components選項(xiàng)中注冊(cè)多個(gè)子組件，并在父組件的模板中使用它們。這樣可以實(shí)現(xiàn)更好的代碼組織和復(fù)用。

這就是使用this.$emit()方法在Vue中觸發(fā)自定義事件的基本用法。

總結(jié)

到此這篇關(guān)于Vue中的this.$emit()方法詳解的文章就介紹到這了,更多相關(guān)Vue this.$emit()方法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論