组件
父向子传参
1 前言
我们前面学习了如何在父页面如何引用子页面的参数,
接下来我们学一点高级的,
如何向子页面传参?
2 父页面改变组件的值——props声明
我们通过props声明去实现父页面传什么值,它就显示什么值。
我们修改WelcomeWorld页面为如下,
<template>
<div>
<h1>{{ greeting }}</h1>
</div>
</template>
<script setup>
import { defineProps } from 'vue';
defineProps({
greeting: String
});
</script>
在示例中,defineProps
用于在 WelcomeWorld
组件中定义了一个 greeting
的 属性,可以用来接收父页面传递来的值,其类型为字符串。这样,当 WelcomeWorld
组件被父组件多次引用时,可以通过传递不同的 greeting
数据,从而在每个组件实例中显示不同的欢迎语句。
父页面修改为如下
<template>
<div>
<WelcomeWorld greeting="Welcome to my World 1!" />
<WelcomeWorld greeting="Welcome to my World 2!" />
<WelcomeWorld greeting="Welcome to my World 3!" />
</div>
</template>
<script setup>
import WelcomeWorld from './WelcomeWorld.vue'
</script>
在父组件中,我们将 WelcomeWorld
组件多次引入,并传递不同的 greeting
数据给每一个组件实例。现在,每个 WelcomeWorld
组件将根据传递的 greeting
数据来显示不同的欢迎语句。
注意,这里
<WelcomeWorld greeting="Welcome to my World 1!" />
greeting不是固定值,这个值指的是组件声明什么属性,那父页面就要传什么属性,如果组件声明的是其他名字,那父页面就要改成其他变量。
可以使用vue3官网的在线编辑器试一下,
同时我们可以一次性传一个数组,不用同时声明三个相同组件。
修改为如下,我们只要声明一个标签就可以了
<template>
<div>
<WelcomeWorld
v-for="item in items "
:key="item"
:greeting="item"/>
</div>
</template>
<script setup>
import WelcomeWorld from './WelcomeWorld.vue'
const items = [
'Welcome to my World 1!' ,
'Welcome to my World 2!',
'Welcome to my World 3!'
];
</script>
3 注意
(1)我们只能让父组件向下传参,不能再让子组件向父组件传参。