vue全家桶进阶之路40:Vue3父件传值给子件
在Vue3中,可以通过props
将父组件的数据传递给子组件。具体步骤如下:
-
在父组件中定义要传递给子组件的数据,可以是data属性中的数据或者是计算属性computed中的数据。
-
在子组件中通过
props
属性声明接收父组件传递的数据。 -
在子组件中使用接收到的数据。
下面是一个示例:
<template> <div> <h1>{{ message }}</h1> <ChildComponent :child-message="message" /> </div> </template> <script> import { ref } from 'vue'; import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, setup() { const message = ref('Hello, World!'); return { message }; } }; </script>
子组件代码:
<template> <div> <h2>Child Component</h2> <p>{{ childMessage }}</p> </div> </template> <script> import { defineProps } from 'vue'; export default { props: { childMessage: { type: String, required: true } }, setup(props) { const childMessage = props.childMessage; return { childMessage }; } }; </script>
在父组件中,我们通过 props 将 message
变量传递给子组件 ChildComponent
,子组件中定义了一个 childMessage
props 来接收这个数据。
在子组件中,我们通过 defineProps()
函数来定义 childMessage
props,同时在 setup()
函数中使用 props
参数来获取父组件传递过来的数据,并将其赋值给 childMessage
变量。
在子组件的模板中,我们就可以直接使用 childMessage
变量来渲染数据了。