vue3-composition API 之 provide/inject（2）

一、基础语法：

1、父组件提供数据/provide(key,value)：

2、子组件使用数据/inject(key,defaultValue)：默认值可选参数；

3、子组件注入的数据是ref 对象；

//父组件
import {ref,provide} from 'vue'
export default {
    setup(p) {
	    const name=ref('jack')
	    provide("name",name)
    }
}

//子组件
<template>
	<div>{{name}}</div>
</template>

<script>
	import {inject} from 'vue'
	export default {
		setup(props, cxt) {
			const name=inject("name",'tony')
            console.log(isRef(name));//true
			return {
				name
			}
		}
	}
</script>

二、改变数据（响应式）

1、父组件修改数据源，子组件的数据也被修改。

1、子组件修改数据源，父组件的数据也被修改。

//父组件
setup() {
	const count = ref(0)
	const change_count = () => {
		count.value ++
	}
	provide("count", count)
	return {
		change_count
	}
},

//子组件

setup(props, context) {
	const count = inject("count", 10)
	watch(count,(newV,oldV)=>{
		// count is change: 0 to 1
		console.log("count is change:",`${oldV} to ${newV}`);
	})
	return {
		count
	}
},

3、为了不让其他组件修改数据源，保证单向数据流，可以通过readonly方法向外提供数据：

provide("count", readonly(count))

 4、provide组件提供对外的方法，让inject组件修改数据源：

//provide 组件
setup() {
	const count = ref(0)
	provide("count", readonly(count))
	const change_count = (from) => {
		console.log(from);
		count.value ++
	}
	provide("update-count", change_count)
	return {
		count,
		change_count
	}
}


//inject组件：
setup(props, context) {
	const change_count=inject("update-count")
	return {
		change_count
	}
}

三、provide/inject场景

1、解决组件深度嵌套时，组件的数据传递问题