Vue3组件间通信知识整理——父组件向子组件传参

赶时间的帅比可以跳过此段！项目重构差不多了，觉得有必要花几天事件整理一下重构过程中遇到的各种各样的问题及解决方案。我认为各种问题的出现的背后都是需求的驱使，所以我在文章书写的过程中，相对简单的以案例演示叙述，而相对特殊典型的尽量放出场景、聊需求，增加代入感的方式来叙述Vue3组件间通信的方式。

先准备一个清清爽爽的文件。结构目录如下⬇

项目重构时遇到的组件间通信有：

1. 父组件向子组件传参
2. 子组件向父组件传参
3. 兄弟组件间通信
4. 父组件调用子组件方法

父组件向子组件传参

组件化开发，父组件向子组件传参的情景是极为常见、普遍的。

基本

// 父组件传出
<script setup>
import { reactive, ref } from 'vue'
import childrenTest_oneVue from "./conponents/childrenTest_one.vue";

const name = "小明"
const age = ref(18)
const brother = [
  '小红','小芳','小白'
]
const info = reactive({
  gender: '男',
  brithday: '2000/01/01'
})
</script>

<template>
  <childrenTest_oneVue :name="name" :age="age" :brother="brother" :info="info"/>
</template>

// -------------------分界线------------------------

// 子组件接收
<script setup>
const props = defineProps({
  name: {
    type: String
  },
  age: {
    type: Number
  },
  info: {
    type: Object
  },
  brother: {
    type: Array
  }
})

props.name = '小东'
props.age = 19
props.info.gender = '女'
props.brother[0] = '小猪'

console.log(typeof props.name)
console.log(props.age)
console.log(props.info)
console.log(props.brother)
</script>

<template>
  <span>姓名: {{ name }}</span>
  <br/><br/>
  <span>年龄: {{ age }}</span>
  <br/><br/>
  <span>基本信息: {{ info.gender }}  {{ info.brithday }}</span>
  <br/><br/>
  <div>
    <span>兄弟姐妹: </span>
    <span v-for="(item,index) in brother" :key="index">{{ item }}&nbsp;</span>
  </div>
</template>

浏览器及操作台输出⬇

浏览器渲染和操作台打印如上，可以得出以下几点结论：

1. 父组件使用ref响应式处理 js 基础数据类型，使用reactive响应式处理 js 引用数据类型，在传输之后在子组件原始数据类型的响应式会丢失，而引用数据类型的响应式会保留，最终都不影响在html文档中使用。
2. 父组件向子组件传参，原则上子组件不能直接去修改props的数据（编译器中书写类似的修改代码eslint会报错，但不影响运行），原始数据类型直接修改会出现只读警告且修改失效，引用数据类型直接修改不会出现警告且修改成功。这跟 js 这两种基础数据类型的存储方式有关，原始数据类型直接把值存储在内存地址当中，引用数据类型在内存地址中存储的是该类型数据的“指针”，也就是说该“指针”只读，而不是里面的值只读，有const那味了。

总结

Vue3的setup语法糖父组件向子组件传参就如上述。…

文章有问题之处还望评论斧正！

更多其他组件间通信文章链接放在下方⬇

Vue3组件间通信知识整理——子组件向父组件传参
Vue3组件间通信知识整理——兄弟组件之间通信
Vue3组件间通信知识整理——父组件调用子组件方法