Vue3.0 中新增了Composition API , 在使用h函数渲染vnode时,如果需要使用ref, 和 vue2.0中有所不同。

先来看在 Vue3 如何在模版语法中使用ref(options语法中获取ref和2.0版本语法无差异)

<template>
	<div ref="divRef">ref demo</div>
</template>
<script>
import { ref, onMounted } from "vue";
export default {
	name: "Demo",
	setup() {
		const divRef = ref(); // 初始值需要赋值为空,或者null, 变量名一定要和模版中的ref一致
		
		onMounted(() => {
			console.log(divRef.value) // 此时在mounted周期中可以访问到ref
		})
		
		return {
			divRef
		}
	}
}
</script>

在渲染函数中使用并访问ref:

<script>
import { h, ref, onMounted } from "vue";
export default {
	name: "Demo",
	setup() {
		const divRef = ref(); // 初始值需要赋值为空,或者null
		
		onMounted(() => {
			console.log(divRef.value) // 此时在mounted周期中可以访问到ref
		})
		
		return () => h('div', {
			ref: divRef, // 此处ref的值是divRef变量,不可写成 “divRef” 字符串,否则访问不到。(在vue2.0中,此处的值是字符串)
		}, "ref demo")
	}
}
</script>
Logo

前往低代码交流专区

更多推荐