vue3随笔记录

主要记录vue3使用过程的一些细节点

    • [1.toRefs 响应式解构](#1.toRefs 响应式解构)
    • [2.provide + inject异步传递爷孙组件数据](#2.provide + inject异步传递爷孙组件数据)
    • 3.defineExpose暴露子组件方法

1.toRefs 响应式解构

当你在组件中接收 props 的时候,如果只是简单的解构的话,是没有响应式的

所以可以使用 toRefs 来进行解构,这样解构出来的每一个属性都是一个 Ref

clike 复制代码
const {title, count} = toRefs(props)

2.provide + inject异步传递爷孙组件数据

使用链接

当你在封装一些比较复杂的组件时,涉及到的组件层数会比较多 的时候,使用 props 进行数据传递会比较麻烦,所以可以使用 provide + inject 来进行数据传递共享

3.defineExpose暴露子组件方法

vue3父子组价里,父组件使用子组件的方法,需要子组件使用defineExpose将对应方法暴露出来

clike 复制代码
// son.vue
<script>
	defineExpose({
	  sonFun1,
	  sonFun2,
	})
</script>

// far.vue
<script>
  	let sonRef = ref(null)
	sonRef.value?.sonFun1()
</script>
相关推荐
市民中心的蟋蟀28 分钟前
第五章 使用Context和订阅来共享组件状态
前端·javascript·react.js
我不会编程55529 分钟前
Python Cookbook-5.1 对字典排序
开发语言·数据结构·python
李少兄30 分钟前
Unirest:优雅的Java HTTP客户端库
java·开发语言·http
逆袭的小黄鸭32 分钟前
JavaScript 闭包:强大特性背后的概念、应用与内存考量
前端·javascript·面试
Mintopia44 分钟前
Node.js 中 fs.readFile API 的使用详解
前端·javascript·node.js
Face1 小时前
事件循环
前端·javascript
谦谦橘子1 小时前
服务端渲染原理解析
前端·javascript·react.js
Mintopia1 小时前
深入理解 Three.js 中的 PerspectiveCamera
前端·javascript·three.js
无名之逆1 小时前
Rust 开发提效神器:lombok-macros 宏库
服务器·开发语言·前端·数据库·后端·python·rust
似水এ᭄往昔1 小时前
【C语言】文件操作
c语言·开发语言