1. 前言
- 之前有篇文章vue通信方式总结,vue3其实也都支持
- 这篇主张主要总结
vue3父子组件传参的方式,而且是setup语法糖用法中的 父子组件传参- 其实和
v2.x差别不大
2. setup语法糖写法的优势
<script setup>是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖- 相比于普通的 <script> 语法，它具有更多优势：
- 更少的样板内容，
更简洁的代码。- 能够使用纯
Typescript声明 props 和抛出事件。- 更好的
运行时性能 (其模板会被编译成与其同一作用域的渲染函数，没有任何的中间代理)。- 更好的 IDE 类型推断性能 (减少语言服务器从代码中抽离类型的工作)。
效果演示
演示.gif
3. 属性传值
3.1 父组件属性传参
<PlayMsg play="父组件的" :play-a="a"></PlayMsg>
- 传值的使用驼峰还是横岗,看个人习惯
- 自己可以试着传多种类型练习
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>
defineProps不需要导入,直接使用即可,因为会在<script setup>处理过程一同被编译掉。defineProps接收与props选项相同的值,type,default,required,validatorhtml布局中可以直接使用``props中的变量- 在编写
js逻辑中如果需要使用传过来的变量,不能直接使用,通过defineProps返回的对象来访问- 直接定义变量类型, 其他不配置可以简写
foo: StringdefineProps只能写在setup顶层,就是不能写在任何其他的函数或者{}里面
4. 子组件修改父组件数据
- 子组件同样不能直接修改父组件数据,谁的数据谁负责,父组件的数据只能由父组件自己来负责
4.1 父组件逻辑
- 父组件传递给子组件修改函数
- 完整的父组件代码
- 传自定义事件的时候.建议横岗
<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 子组件使用
- 代码
<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>
defineEmits不需要导入,直接使用即可,因为会在<script setup>处理过程一同被编译掉。defineEmits也接收emits选项相同的值。defineEmits只能写在setup顶层,就是不能写在任何其他的函数或者{}里面defineEmits参数是数组,可以接收多个自定义函数,建议自定义函数都用横岗- 调用的时候参数是原函数的参数,不传参数的话,参数默认是事件对象
5. watch监听父组件数据的改变
- 这里为什么突然冒出个监听/watch
- 是因为这里子组件监听父组件数据的改变,有点注意事项
- 就是上面编写的这条 ,在编写
js逻辑中如果需要使用传过来的变量,不能直接使用,通过defineProps返回的对象来访问- 这里不能直接监听
playA或者"playA"watch是需要从vue导入的哦
watch(superData.playA, () => { console.log("playA 监听:", superData.playA); })
6. provide 和 inject
- 父组件(准确来说应该是父辈组件,爷爷,曾爷爷都算)
- 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>
