Vue3 setup 在渲染函数中通过ref访问Dom元素
Vue3.0 中新增了Composition API , 在使用h函数渲染vnode时,如果需要使用ref, 和 vue2.0中有所不同。先来看在 Vue3 如何在模版语法中使用ref(options语法中获取ref和2.0版本语法无差异)<template><div ref="divRef">ref demo</div></template><
·
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>
更多推荐
已为社区贡献12条内容
所有评论(0)