Vue $emit() 方法

示例

使用$emit()方法在单击按钮时向父组件触发自定义事件。

<template>
  <div>
    <h3>ChildComp.vue</h3>
    <p>Click the button to trigger the custom event up to the parent component using the $emit() method.</p>
    <button v-on:click="this.$emit('custom-event')">Trigger</button>
  </div>
</template>

运行示例 »

请参阅下面的更多示例。

定义和用法

内置的$emit()方法触发一个自定义事件，该事件用于与父组件进行通信。

Argument	Description
Custom event name	Default. This first argument is the name of the custom event triggered with the `$emit()` method.
More arguments	Optional. One or more arguments can be sent with the custom event as a payload. (See Example 1 and 2 below.)

这个emits选项可用于记录组件发出的内容。使用emits选项提高了可读性，但这不是必需的。（参见下面的示例 3。）

道具用于传达相反的方向：从父组件向下到子组件。在教程中阅读有关道具的更多信息。

更多示例

示例1

使用$emit()方法使用“message-sent”自定义事件向父组件发送消息。

<template>
  <div>
    <h3>ChildComp.vue</h3>
    <p>Write something, and send the message up to the parent component using the $emit() method.</p>
    <input type="text" v-model="message" placeholder="write something..">
    <button v-on:click="send">Send</button>
  </div>
</template>

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

<style scoped>
div {
  border: solid black 1px;
  padding: 10px;
  max-width: 350px;
  margin-top: 20px;
}
input {
  display: block;
  margin-bottom: 15px;
}
</style>

运行示例 »

示例2

使用$emit()方法将产品名称和评级发送到父组件。

<template>
  <div>
    <h3>ChildComp.vue</h3>
    <p>Rate a product:</p>
    <input type="text" v-model="productName" placeholder="Product name.." ref="inpName">
    <input type="number" v-model="productRating" placeholder="Rating 1 to 10..">
    <button v-on:click="send">Register</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      productName: null,
      productRating: null
    }
  },
  methods: {
    send() {
      this.$emit('message-sent',this.productName,this.productRating);
      this.productName = null;
      this.productRating = null;
      this.$refs.inpName.focus();
    }
  },
  mounted() {
    this.$refs.inpName.focus();
  }
}
</script>

<style scoped>
div {
  border: solid black 1px;
  padding: 10px;
  max-width: 350px;
  margin-top: 20px;
}
input {
  display: block;
  margin-bottom: 15px;
}
</style>

运行示例 »

示例3

使用emits选项来记录组件发出的内容$emit()方法。这不是必需的，但它提高了可读性。

<template>
  <div>
    <h3>ChildComp.vue</h3>
    <p>Click the button to trigger the custom event up to the parent component using the $emit() method.</p>
    <button v-on:click="this.$emit('custom-event')">Trigger</button>
  </div>
</template>

<script>
export default {
  emits: ['custom-event']
}
</script>

<style scoped>
div {
  border: solid black 1px;
  padding: 10px;
  max-width: 350px;
  margin-top: 20px;
}
</style>

运行示例 »

码农教程 - 一技在手,衣食无忧!

Vue $emit() 方法

示例

定义和用法

更多示例

示例1

示例2

示例3

相关页面