Phương thức Vue $emit()
Ví dụ
Sử dụng phương thức $emit()
để kích hoạt một sự kiện tùy chỉnh cho thành phần chính khi nút được nhấp vào.
<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>
Chạy ví dụ »Xem thêm ví dụ dưới đây.
Định nghĩa và cách sử dụng
Phương thức $emit()
tích hợp sẽ kích hoạt một sự kiện tùy chỉnh được sử dụng để giao tiếp với thành phần chính.
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.) |
Tùy chọn emits
có thể được sử dụng để ghi lại những gì thành phần phát ra. Việc sử dụng tùy chọn emits
sẽ cải thiện khả năng đọc nhưng không bắt buộc. (Xem ví dụ 3 bên dưới.)
Đạo cụ được sử dụng để giao tiếp theo hướng ngược lại: từ thành phần cha mẹ xuống thành phần con. Đọc thêm về đạo cụ trong phần hướng dẫn .
Thêm ví dụ
ví dụ 1
Sử dụng phương thức $emit()
để gửi tin nhắn đến thành phần chính, với sự kiện tùy chỉnh '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>
Chạy ví dụ »Ví dụ 2
Sử dụng phương thức $emit()
để gửi tên sản phẩm và xếp hạng tới thành phần chính.
<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>
Chạy ví dụ »Ví dụ 3
Sử dụng tùy chọn emits
để ghi lại những gì thành phần phát ra bằng phương thức $emit()
. Điều này không bắt buộc nhưng nó giúp cải thiện khả năng đọc.
<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>
Chạy ví dụ »Trang liên quan
Hướng dẫn về Vue: Phương thức Vue $emit()
Hướng dẫn Vue: Đạo cụ Vue
Hướng dẫn Vue: Sự kiện Vue
Hướng dẫn Vue: Chỉ thị Vue v-on
Hướng dẫn về Vue: Tạo kiểu theo phạm vi