vue3setup语法糖父子传值
时间: 2023-10-16 08:08:18 浏览: 44
在Vue 3中,你可以使用`setup`函数来实现父子组件之间的传值。`setup`函数是在组件创建之前执行的,它接收两个参数:`props`和`context`。
要在父组件中向子组件传递值,首先需要在父组件中将值作为属性传递给子组件。然后,在子组件的`setup`函数中可以通过`props`参数访问到父组件传递过来的值。
以下是一个简单的示例:
```vue
<template>
<div>
<p>父组件传递的值: {{ message }}</p>
<ChildComponent :message="message" />
</div>
</template>
<script>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
setup() {
const message = ref('Hello from parent');
return {
message
};
}
};
</script>
```
在上面的示例中,父组件通过`:message="message"`将`message`作为属性传递给子组件。在子组件的`setup`函数中,通过`props`参数可以访问到父组件传递过来的值。
```vue
<template>
<div>
<p>子组件接收到的值: {{ message }}</p>
</div>
</template>
<script>
export default {
props: {
message: {
type: String,
required: true
}
},
setup(props) {
// 可以通过 props.message 访问到父组件传递过来的值
return {
message: props.message
};
}
};
</script>
```
在子组件中,可以通过`props`对象访问到父组件传递过来的值,并将其赋值给一个本地变量,以便在模板中使用。
这样就实现了父子组件之间的传值。注意,`setup`函数中返回的是一个对象,该对象中的属性可以在模板中直接使用。