父向子传参

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）我们只能让父组件向下传参，不能再让子组件向父组件传参。