1. 前言

1. 之前有篇文章vue通信方式总结,vue3其实也都支持
2. 这篇主张主要总结vue3 父子组件传参的方式,而且是setup语法糖用法中的 父子组件传参
3. 其实和v2.x差别不大

---

2. setup语法糖写法的优势

1. <script setup> 是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖

2. 相比于普通的 <script> 语法，它具有更多优势：

3. 更少的样板内容，更简洁的代码。
4. 能够使用纯Typescript声明 props 和抛出事件。
5. 更好的运行时性能 (其模板会被编译成与其同一作用域的渲染函数，没有任何的中间代理)。
6. 更好的 IDE 类型推断性能 (减少语言服务器从代码中抽离类型的工作)。

---

效果演示

演示.gif

---

3. 属性传值

3.1 父组件属性传参

<PlayMsg play="父组件的" :play-a="a"></PlayMsg>

1. 传值的使用驼峰还是横岗,看个人习惯
2. 自己可以试着传多种类型练习

---

3.2 子组件接收

<template>
    <div>
        <h1>vue3 --setup--父子组件传参总结</h1>
        <h1>直接使用:{{play}}</h1>
    </div>
</template>
<script setup>
let superData = defineProps({
    play:{
        type:String,
        default:"默认值"
    },
    playA:{
        type:Array,
        required:true
    },
    foo: String
})
console.log("play:",superData.play);
console.log("playA:",superData.playA);

</script>

1. defineProps不需要导入,直接使用即可,因为会在<script setup>处理过程一同被编译掉。
2. defineProps 接收与 props 选项相同的值,type,default,required,validator
3. html布局中可以直接使用``props中的变量
4. 在编写js逻辑中如果需要使用传过来的变量,不能直接使用,通过defineProps返回的对象来访问
5. 直接定义变量类型, 其他不配置可以简写foo: String
6. defineProps 只能写在setup顶层,就是不能写在任何其他的函数或者{}里面

---

4. 子组件修改父组件数据

1. 子组件同样不能直接修改父组件数据,谁的数据谁负责,父组件的数据只能由父组件自己来负责

---

4.1 父组件逻辑

2. 父组件传递给子组件修改函数
3. 完整的父组件代码
4. 传自定义事件的时候.建议横岗

<template>
    <div>
        <button @click="changeA(10)"> 修改</button>
        <h1>{{ a }}</h1>
        <PlayMsg play="父组件的" :play-a="a" @change-a="changeA"></PlayMsg>
    </div>
</template>

<script setup>
import PlayMsg from '../components/playMsg.vue';
import { reactive } from 'vue'
let a = reactive([1, 2, 4, 5, 6])
const changeA = (el) => {
    a.push(el)
    console.log("el:", el);
    console.log("a 父组件", a);
}
</script>

---

4.2 子组件使用

1. 代码

<template>
    <div>
        <h1>vue3 --setup--父子组件传参总结</h1>
        <h1>直接使用:{{ play }}</h1>
       <h1>watch: {{ playA }}</h1>
        <button @click="updateA">修改 父组件数据</button>
    </div>
</template>
<script setup>
let superData = defineProps({
    play: {
        type: String,
        default: "默认值"
    },
    playA: {
        type: Array,
        required: true
    }
})

console.log("play:", superData.play);
console.log("playA:", superData.playA);
//****************** 调用父组件修改函数 */
let myEmit = defineEmits(["change-a"])

const updateA = () => {
    myEmit("change-a",100)
}
</script>

1. defineEmits不需要导入,直接使用即可,因为会在<script setup>处理过程一同被编译掉。
2. defineEmits 也接收 emits 选项相同的值。
3. defineEmits 只能写在setup顶层,就是不能写在任何其他的函数或者{}里面
4. defineEmits参数是数组,可以接收多个自定义函数,建议自定义函数都用横岗
5. 调用的时候参数是原函数的参数,不传参数的话,参数默认是事件对象

---

5. watch监听父组件数据的改变

1. 这里为什么突然冒出个监听/watch
2. 是因为这里子组件监听父组件数据的改变,有点注意事项
3. 就是上面编写的这条 ,在编写js逻辑中如果需要使用传过来的变量,不能直接使用,通过defineProps返回的对象来访问
4. 这里不能直接监听playA或者 "playA"
5. watch是需要从vue导入的哦

watch(superData.playA, () => {
    console.log("playA 监听:", superData.playA);
})   

---

6. provide 和 inject

1. 父组件(准确来说应该是父辈组件,爷爷,曾爷爷都算)
2. provide语法 provide(key,value)

<script setup>
import {provide} from 'vue'
/// 语法provide(key,value)
provide("p1",'测试Proviede')
provide("p2",['单独写的','数组'])
</script>

---

7. inject

<template>
    <div>
        <h1>vue3 --setup--父子组件传参总结</h1>
        <h1>inject:{{ a1 }}</h1>
    </div>
</template>
<script setup>
import { inject } from 'vue'
let a1 = inject("p1")
console.log("a1:", a1);
let a2 = inject("p2")
console.log("a2:", a2);
</script>

---

参考资料

vue通信方式总结

---

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理;如有错误,欢迎交流;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉