使用emits
选项来声明从组件发出哪些自定义事件。
export default {
emits: ['custom-event'],
methods: {
notifyParent() {
this.$emit('custom-event','Hello! ')
}
}
}
运行示例 »
请参阅下面的更多示例
这个emits
选项用于记录组件发出的自定义事件。
这个emits
选项不是必需的,这意味着组件可以发出事件而无需在emits
选项。
尽管emits
选项不是必需的,但仍然建议具有,以便其他程序员可以轻松查看组件发出的内容。
当。。。的时候emits
选项以数组形式给出,该数组仅包含作为字符串发出的名称。 (参见上面的示例。)
当。。。的时候emits
option 作为一个对象给出,属性名称是发射的名称,如果有验证器函数,则该值为验证器函数;如果发射没有验证器函数,则为“null”。 (参见下面的示例。)
使用 props 作为带有选项的对象,以便在父组件未提供时显示默认的食物描述。
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>
运行示例 »
Vue教程:Vue $emit() 方法
Vue教程:Vue 道具
Vue参考:Vue $props 对象
Vue参考:Vue $emit() 方法
截取页面反馈部分,让我们更快修复内容!也可以直接跳过填写反馈内容!