Vue3的语法糖进行父子组件传值

news/2024/9/24 7:25:16/

父组件

// 对于父组件来说,跟Vue2的写法差不多
<template><children :selection="multipleSelection"></children>
</template>
<script setup lang="ts">// 定义变量 let multipleSelection: Array<object> = ref([])// 在方法里面赋值const selChange = (val) => {multipleSelection.value = val}
</script>

子组件

<script setup lang="ts">
import { toRefs, defineProps, watch } from 'vue'
// 这里类似Vue2中的prop
const props = defineProps(['selection'])
// 记得使用toRefs,要不然父组件的值改变了,子组件是不会变的
const {selection} = toRefs(props)// 监听父组件传过来的值
watch(() => selection, (val) => {console.log(val)
},{deep: true})
</script>

http://www.ppmy.cn/news/1433811.html

相关文章

吐血整理!最新最全产品经理常用工具清单

作为一名工作5年的半资深产品经理&#xff0c;最近开始带小团队了&#xff0c;刚刚入行的组员经常问我&#xff1a;“XXX用哪个工具好呢&#xff1f;”。借此契机&#xff0c;我分门别类整理了产品经理常用的工具&#xff0c;包含&#xff1a;了解需求、验证需求、产品需求文档…

hbase建表时设置预分区

一.hbase rowkey设计的原则 遵循唯一性,散列,不应过长等原则 二.rowkey常用的设计 1.reverse反转 2.salt加盐 3.hash散列 三.hbase建表预分区,指定3个rowkey,分成4个region 在Hbase中,预分区是一种优化手段,用于在创建表时提前规划好Region的分布,以提高数据写入的效率和查询…

Go栈内存管理源码解读

基本介绍 栈内存一般是由Go编译器自动分配和释放&#xff0c;其中存储着函数的入参和局部变量&#xff0c;这些参数和变量随着函数调用而创建&#xff0c;当调用结束后也会随之被回收。通常开发者不需要关注内存是分配在堆上还是栈上&#xff0c;这部分由编译器在编译阶段通过…

uniapp项目中禁止横屏 ,app不要自动旋转 -,保持竖屏,uniapp取消重力感应

uniapp项目中禁止横屏 &#xff0c;app不要自动旋转 -&#xff0c;保持竖屏&#xff0c;uniapp取消重力感应 1.适用于移动端&#xff0c;安卓和IOS&#xff0c;当即使手机打开了自动旋转的按钮&#xff0c;设置如下的代码后&#xff0c;页面依旧保持竖屏。 步骤一&#xff1a…

Tomcat架构设计精髓分析-Connector高内聚低耦合设计

优秀的模块化设计通常都会采用高内聚、低耦合 高内聚是指相关度比较高的功能要尽可能集中&#xff0c;不要分散。低耦合是指两个相关的模块要尽可能减少依赖的部分和降低依赖的程序&#xff0c;不要让两个模块产中强依赖。 Tomca连接器需要实现的功能: 监听网络端口 接受网络…

《html自用使用指南》--基于w3School实践

1.基础标签 文本输入时&#xff0c;在编辑器中的换行&#xff0c;多个空格&#xff0c;都被编辑器看作一个空格 <p> 这个段落 在源代码 中 包含 许多行 但是 浏览器 忽略了 它们。 </p>结果&#xff1a;这个段落 在源代码 中 包含 许多行 但是 浏览器…

常见UI组件(二)

一、文本输入 1.1 概述 TextInput为文本输入组件&#xff0c;用于接收用户输入的文本内容 1.2 参数 Entry Component struct Index {build() {Column({space : 50}) {TextInput({placeholder:请输入用户名}).width(70%)TextInput({text:当前内容}).width(70%)}.width(100%).…

【SpringBoot实战篇】获取用户详细信息-ThreadLocal优化

1 分析问题 对token的解析当初在拦截器中已经写过。期待的是在拦截器里写了&#xff0c;在其他地方就不写了&#xff0c;应该去复用拦截器里面得到的结果 2 解决方式-ThreadLocal 2.1提供线程局部变量 用来存取数据: set()/get()使用ThreadLocal存储的数据, 线程安全 2.2过程图…