父传子

@defineProps()

通过编译宏 defineProps() 的形式实现通信|参数传递|数据传递

遵循单向数据流 - One-Way Data Flow 的原则

更多信息，请访问 Props

Procedure

子组件在 <script setup> 顶级作用域下，使用宏 defineProps() 定义属性来接收传递的参数并使用

父组件以属性的方式向子组件传递参数：可以是静态数据 Static ，也可以是响应式数据 Dynamic ；可以是简单数据，也可以是复合数据

建议使用小驼峰命名方式 - camelCase

为了和普通变量区分，建议：传递的参数以 prop 开始，如 propName

只有数据的拥有者才可以修改数据：子组件不能直接修改父组件传递的属性参数；如果父组件把这个属性参数还分配了其它子组件。。。

Props Declaration

1. 子组件 <script> - 使用 defineProps() 定义接收的参数，并声明一个变量接收，便于在脚本中进一步处理

方案1：使用数组声明 - 仅指定属性名

const props = defineProps(['propMsg', 'propId'])

方案2：使用对象声明 - 指定属性名、属性类型 type、默认值 default 和是否必须 required；同时存在时，required 无效

const props = defineProps({
    propMsg: String,
    propId: {
      type: Number,
      required: false,
      default: 18
    }
})

2. 子组件<template> - 使用传递来的参数|数据；可以直接使用；也可以使用属性变量获取

<div>{{ propMsg }} - {{ props.propId }}</div>

如果要处理接收的参数，必须使用定义的变量 props 获取，否则提示数据未定义 - 下例利用计算属性将接收的参数转换为大写

import { computed } from 'vue';
const props = defineProps({
  msg: String
})
const comp = computed(() => {
    //return msg.toUpperCase()
    return props.msg.toUpperCase()
})

<div>computed {{ comp }}</div>

ReferenceError: msg is not defined

父组件传递参数

1. 父组件<script> - 引入子组件，准备数据

import { ref } from 'vue';
import Test from './components/Test.vue';
let msg = ref('hi,there')

2. 父组件<template> - 使用子组件；以数据绑定的形式传递参数：1个静态数据 propId、1个响应式数据 propMsg

<Test :propMsg="msg" propId="18"></Test>

Value Types

Number

<Test :propId="18" />

<Test :propId="item.id" />

Boolean

<Test isDone />

<Test :isDone="false" />

<Test :isDone="item.flag" />

Array

<Test :arr="[1,2,3,4,5]" />

<Test :arr="item.list" />

Object

<Test :obj="{id:1001, name:'glpla'}" />

<Test :obj="item.author" />

log时，数字是蓝色；字符串是黑色

props 应该是只读的，不推荐子组件直接修改 props：当父组件更新 props 时，子组件不应该反过来改变这个值

[] 改造产品列表组件，提供不同的产品数据展示不同的列表内容

<List :lists="propLists"/>

[] 封装第三方库 - 轮播组件，提供不同的图片列表数据和高度展示不同的轮播内容

<Swiper :imgUrl="propImgUrls" :swiperH="propSwiperH"/>

传递函数|方法

除了传递数据，还可以传递方法 - 子组件执行父组件的方法，如让父组件修改属性参数。。。

子组件

暴露参数，类型为函数；注意是 Function，不是 function

const props = defineProps({
    closeFn: Function,
    confirmFn: Function
})

使用方法

<button @click="closeFn">×</button>
<button @click="confirmFn">confirm</button>

父组件

传递方法

<Msg :closeFn="closeFn" :confirmFn="confirmFn"></Msg>

定义事件处理函数

const closeFn = () => { }
const confirmFn = () => { }