概述

We have already seen that props are used to pass data from a parent component to a child component. To pass data from a child component back to a parent component, Vue offers custom events.

我們已經(jīng)看到，道具用于將數(shù)據(jù)從父組件傳遞到子組件。為了將數(shù)據(jù)從子組件傳遞回父組件，Vue 提供了自定義事件。

In a component, we can emit an event using the e m i t m e t h o d ; w i t h t h i s . emit method; with this. emitmethod;withthis.emit(‘eventName’, payload) within <script>; or just with $emit within the template section.

在組件中，我們可以使用 e m i t 方法、在 ‘ < s c r i p t > ‘ 中使用 t h i s . emit 方法、在 `<script>` 中使用 this. emit方法、在‘<script>‘中使用this.emit(‘eventName’, payload) 或在模板部分使用 $emit 來發(fā)射事件。

Assuming we have got a reactive instance property, this.message, we could emit a send event with the message value in the script section using this.$emit. This could be the basis for a MessageEditor component:

假設(shè)我們已經(jīng)有了一個反應(yīng)式實(shí)例屬性 this.message，我們就可以在腳本部分使用 this.$emit 發(fā)送一個帶有消息值的發(fā)送事件。這可以作為 MessageEditor 組件的基礎(chǔ)：

<script>
export default {
  data () {
    return {
      message: null
    }
  },
  methods: {
    send() {
      this.$emit('send', this.message);
    }
  }
}
</script>

In the same scenario, we could trigger a send event from the template section as follows:

在同樣的情況下，我們可以從模板部分觸發(fā)發(fā)送事件，如下所示：

<template>
  <div>
    <input v-model="message" />
    <button @click="$emit('send', message)">Emit inline</button>
  </div>
</template>

From a parent component, we can use v-on:event-name or the shorthand @event-name. event-name must match the name passed to $emit. Note eventName and event-name are not equivalent.

在父組件中，我們可以使用 v-on:event-name 或快捷方式 @event-name。event-name 必須與傳遞給 $emit 的名稱一致。請注意，eventName 和 event-name 并不等同。

For instance, in the parent component we want to listen to the send event and modify some data accordingly. We bind @send with some event handler logic, which can be a JavaScript expression or a method declared using methods.

例如，在父組件中，我們要監(jiān)聽發(fā)送事件并相應(yīng)地修改一些數(shù)據(jù)。我們將 @send 與一些事件處理邏輯綁定，這些邏輯可以是 JavaScript 表達(dá)式，也可以是使用 methods 聲明的方法。

Vue will trigger this event handler and pass the event’s payload object to it when applicable. You can use $event in the JavaScript expression of the template as the payload, as shown in the following example of the template section in App:

Vue 將觸發(fā)該事件處理程序，并在適用時將事件的有效載荷對象傳遞給它。您可以在模板的 JavaScript 表達(dá)式中使用 $event 作為有效載荷，如以下 App.Vue 中模板部分的示例所示：

<template>
  <div id="app">
    <p>Message: {{ parentMessage }}</p>
    <MessageEditor @send="parentMessage = $event" />
    <button @click="parentMessage = null">Reset</button>
  </div>
</template>

We can also extract the JavaScript expression to a component’s updateParentMessage method and bind it as follows:

我們還可以將 JavaScript 表達(dá)式提取到組件的 updateParentMessage 方法中，并將其綁定如下：

<template>
  <div id="app">
    <p>Message: {{ parentMessage }}</p>
    <MessageEditor @send="updateParentMessage" />
    <button @click="parentMessage = null">Reset</button>
  </div>
</template>
<script>
import MessageEditor from './components/MessageEditor.vue'
export default {
  components: {
    MessageEditor
  },
  data() {
    return {
      parentMessage: null
    }
  },
  methods: {
    updateParentMessage(newMessage) {
      this.parentMessage = newMessage
    }
  }
}
</script>

Custom events support passing any JavaScript type as the payload. The event name, however, must be a String.

自定義事件支持傳遞任何 JavaScript 類型作為有效載荷。不過，事件名稱必須是字符串。

在setup中使用事件

If you use <script setup>, since there is no component’s options object, we can’t define custom events using the emits field. Instead, we use the defineEmits() function from the vue package and pass all the relevant events’ definitions to it.

如果使用 <script setup>，由于沒有組件的選項對象，我們就無法使用 emits 字段定義自定義事件。相反，我們可以使用 vue 軟件包中的 defineEmits() 函數(shù)，并將所有相關(guān)事件的定義傳遞給它。

For example, in the MessageEditor component, we can rewrite the event-registering functionality with defineEmits() as follows:

例如，在 MessageEditor 組件中，我們可以使用 defineEmits() 重寫事件注冊功能如下：

<template>
  <div>
    <input v-model="message"/>

    <!--點(diǎn)擊的適合，手動傳遞值-->
    <button @click="$emit('send', message)">Emit inline</button>
  </div>
</template>

<script setup>
import {defineEmits, ref} from 'vue'

const message = ref(null)

// 定義事件
const emits = defineEmits(['send'])

// 通過事件向父組件傳遞值
emits('send', message.value);
</script>

defineEmits() returns a function that we can trigger in the same concept with this.$emits. We will certainly need to use ref() to declare a reactive data message for this component, the usage.

defineEmits()會返回一個函數(shù)，我們可以用與 this.$emits 相同的概念來觸發(fā)它。我們肯定需要使用 ref() 來為該組件聲明反應(yīng)式數(shù)據(jù)消息。

到此這篇關(guān)于Vue3中emit傳值的具體使用的文章就介紹到這了,更多相關(guān)Vue3 emit傳值內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論