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() 方法触发一个自定义事件，该事件用于向上与父组件通信。
| 参数 | 描述 |
|---|---|
| 自定义事件名称 | 默认。第一个参数是使用 $emit() 方法触发的自定义事件的名称。 |
| 更多参数 | 可选。可以使用一个或多个参数作为有效载荷发送给自定义事件。（参见下面的示例 1 和 2。） |
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 教程：Vue $emit() 方法
Vue 教程：Vue 属性
Vue 教程：Vue 事件
Vue 教程：Vue v-on 指令
Vue 教程：作用域样式
