Tùy chọn 'phát ra' của Vue
Ví dụ
Sử dụng tùy chọn emits
để khai báo sự kiện tùy chỉnh nào được phát ra từ thành phần.
export default {
emits: ['custom-event'],
methods: {
notifyParent() {
this.$emit('custom-event','Hello! ')
}
}
}
Chạy ví dụ »Xem thêm ví dụ bên dưới
Định nghĩa và cách sử dụng
Tùy chọn emits
được sử dụng để ghi lại những sự kiện tùy chỉnh mà một thành phần phát ra.
Tùy chọn emits
là không bắt buộc, điều đó có nghĩa là một thành phần có thể phát ra các sự kiện mà không cần xác định chúng bên trong tùy chọn emits
.
Mặc dù tùy chọn emits
là không bắt buộc nhưng vẫn nên có để các lập trình viên khác có thể dễ dàng xem thành phần phát ra gì.
Khi tùy chọn emits
được đưa ra dưới dạng một mảng, mảng đó chỉ bao gồm tên của các lần phát dưới dạng chuỗi. (Xem ví dụ ở trên.)
Khi tùy chọn emits
được đưa ra dưới dạng một đối tượng, tên thuộc tính là tên của một lần phát ra và giá trị là hàm xác thực nếu nó có hoặc 'null' nếu phát ra không có chức năng xác thực. (Xem ví dụ bên dưới.)
Thêm ví dụ
Ví dụ
Sử dụng đạo cụ làm đối tượng với các tùy chọn để mô tả món ăn mặc định được hiển thị khi nó không được thành phần gốc cung cấp.
FoodItem.vue
:
<template>
<div>
<h2>{{ foodName }}</h2>
<p>{{ foodDesc }}</p>
</div>
</template>
<script>
export default {
props: {
foodName: {
type: String,
required: true
},
foodDesc: {
type: String,
required: false,
default: 'This is the food description...'
}
}
};
</script>
App.vue
:
<template>
<h1>Food</h1>
<p>Food description is not provided for 'Pizza' and 'Rice', so the default description is used.</p>
<div id="wrapper">
<food-item
food-name="Apples"
food-desc="Apples are a type of fruit that grow on trees."/>
<food-item
food-name="Pizza"/>
<food-item
food-name="Rice"/>
</div>
</template>
<style>
#wrapper {
display: flex;
flex-wrap: wrap;
}
#wrapper > div {
border: dashed black 1px;
flex-basis: 120px;
margin: 10px;
padding: 10px;
background-color: lightgreen;
}
</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
Tham khảo Vue: Đối tượng Vue $props
Tham khảo Vue: Phương thức Vue $emit()