Vue3 setup中Provide/Inject/ref获取dom元素的使用

作者：温新

时间：2021-08-22

hi，我是温新，一名PHPer

在 setup() 中使用 provide 时，我们首先从 vue 显式导入 provide 方法。这使我们能够调用 provide 来定义每个 property。

provide 函数允许你通过两个参数定义 property：

1. name (<String> 类型)
2. value

setup中跨组件数据基础使用

<div id="app">
	<son></son>
</div>

<script>
	const app = Vue.createApp({
		setup() {
			const {provide} = Vue;
			// 提供所有组件可以直接使用的数据
			provide('webName','自如初');

			return {}
		}
	});
	app.component('son', {
		template:`<div><h3>son</h3>
			<p>{{ webName }}</p>
		</div>`,
		setup() {
			// 子组件使用inject使用数据
			const {inject} = Vue;

			// 接收数据
			let webName = inject('webName');

			return {webName};
		}
	});
	const vm = app.mount('#app');
</script>

子组件中修改provide提供的数据

其它组件想要修改数据，最好的建议是谁提供的数据谁去修改，也就是说父组件提供的所有组件使用的provide数据，那么数据的修改最好也是在父组件中完成。

<div id="app">
	<son></son>
</div>

<script>
	const app = Vue.createApp({
		setup() {
			const {provide,ref,readonly} = Vue;
			let webName = ref('自如初');

			// 提供所有组件可以直接使用的数据
			provide('webName', readonly(webName));
			// 其它组件修改数据走这个方法
			provide('changeData', (value) => {
				webName.value = value;
			});

			return {}
		}
	});

	app.component('son', {
		template:`<div><h3>son</h3>
			<p @click="clickdata">{{ webName }}</p>
		</div>`,
		setup() {
			// 子组件使用inject使用数据
			const {inject} = Vue;

			// 接收数据
			let webName = inject('webName');
			// 修改数据的方法
			let changeData = inject('changeData');

			let clickdata = () => {
				// 父组件中使用了readonly,子组件无法直接修改数据
				// webName.value = 'ziruchu';
				changeData('https://www.ziruchu.com');
			}

			return {webName,clickdata};
		}
	});

	const vm = app.mount('#app');
</script>

setup中使用red获取dom元素

<div id="app">
	<!-- 1、定义ref -->
	<div class="content" ref="refdom">
		setup中使用ref获取dom元素
	</div>
</div>

<script>
	const app = Vue.createApp({
		setup() {
			const {ref,onMounted} = Vue;
			// 2、setup中定义ref对象，注意 refdom名称必须一样
			let refdom = ref(null);

			onMounted(() => {
				console.log(refdom.value);
			});

			return {refdom}
		}
	});

	const vm = app.mount('#app');
</script>

我是温新

每天进步一点，就一点点