vue3--setup--父子组件传参-监听
2022-07-04 本文已影响0人
云高风轻
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>
