vue3 父子组件传值 设置必填
时间: 2024-01-18 14:18:25 浏览: 35
在Vue3中,可以通过props属性来设置必填的父子组件传值。下面是一个示例:
父组件(Parent.vue):
```vue
<template>
<Child :message="message" :data="data" />
</template>
<script>
import Child from "./Child.vue";
export default {
name: "Parent",
data() {
return {
message: "test",
data: ['张三', '李四', '王五']
};
},
components: {
Child
}
};
</script>
<style scoped>
</style>
```
子组件(Child.vue):
```vue
<template>
<div>
<input type="text" v-model="message" />
<button @click="click">发送消息给父组件</button>
</div>
</template>
<script>
export default {
props: {
message: {
type: String,
required: true // 设置必填
},
data: {
type: Array,
required: true // 设置必填
}
},
methods: {
click() {
this.$emit("children", this.message);
}
}
};
</script>
<style scoped>
</style>
```
在子组件的props属性中,通过设置`required: true`来将属性设置为必填项。这样在父组件中如果没有传递必填的属性,Vue会发出警告提示。