Vue3学习之provide 与 inject，customRef

此处不留情

已于 2023-03-06 09:27:04 修改

阅读量142

点赞数

分类专栏： vue3 文章标签： vue.js javascript 前端

于 2022-06-14 21:22:50 首次发布

本文链接：https://blog.csdn.net/qq_42369064/article/details/125285731

版权

vue3 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文介绍了Vue中的provide/inject机制用于实现跨级组件通信，并展示了如何使用customRef创建带延迟的自定义ref以实现防抖功能。实例演示了如何在组件间传递数据和控制输入框的更新频率。

摘要由CSDN通过智能技术生成

一、provide 与 inject

作用：实现祖孙（跨级）组件间通信。
套路：父组件有一个provide选项来提供数据，后代组件有一个inject选项来开始使用这些数据。

具体写法
祖组件中：

setup(){
	let car = reactive({name:'奔驰', price:'40万'})
	provide('car', car)
}

后代组件中：

setup(props, context){
	const car = inject('car')
	return {car}
}

二、customRef

作用：创建一个自定义的ref, 并对其依赖项追踪和更新触发进行显式控制。
实现防抖功能：

<template>
	<input type="text" v-model="keyWord">
	<h3>{{keyWord}}</h3>
</template>
<script>
import {ref, customRef} from 'vue'
export default{
	name:'App',
	setup(){
	//自定义一个ref-名为:myRef
		function myRef(value, delay){
		let timer
			return customRef((track, trigger)=>{
				return {
					get(){
						console.log(`有人读${value}数据了`)
						track() // 通知Vue追踪Value的变化
						return value
					},
					set(newVaule){
						console.log(`有人写${newValue}数据了`)
						clearTimeout(timer)
						setTimeout(()=>{
							value = newValue
							trigger() //通知Vue重新解析模板
						}, delay)
					}
				}
			})
		}
		//let keyWord = ref('hello') //使用Vue提供的ref - 精装版-拎包入住
		let keyWord = myRef('hello', 500) //使用自己自定义的ref - 毛坯版-自己装修
		return{keyWord}
	}
}
</script>