前言

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

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

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

子組件 index.vue

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

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

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

父組件 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 {
        }
    }, 
    // 注冊子組件
    components: {
        ChildComponent
    },   
    methods: {
	    handleCustomEvent(data) {
	      // 處理自定義事件的邏輯
	      console.log(data); // 輸出：'Hello, World!'
	    }
   	}

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

注： 

通過在components選項中注冊子組件，可以在父組件的模板中使用該子組件。在這個例子中，父組件可以通過以下方式在模板中使用ChildComponent：

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

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

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

總結(jié)

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

最新評論