一、问题

1.在选项式API中可以直接用 this.$refs.xxx来引用template中的DOM元素。

但是在组合式API setup中没有this,该如何用 ref获取到 DOM元素呢？

2.this.$refs.xxx获取DOM元素的方法

1）在dom上添加 ref="xxx",在方法中直接使用 this.$refs.xxx引用

2）代码

<template><div class="testdiv" ref="testdiv">测试一下</div>
</template>
<script>export default{mounted(){console.log("this.$refs.testdiv",this.$refs.testdiv,this.$refs.testdiv.innerHTML,this.$refs.testdiv.clientWidth)},}
</script>

3）结果

二、解决方法

1. 方法

在DOM上添加 ref="xxx" ,在 setup中定义一个和xxx名称完全相同的 ref响应式变量xxx,并且return出去。

则变量xxx.value就是DOM元素的引用。直接使用xxx.value.functioname、xxx.value.attributename就可以获取DOM元素的方法或属性。

2. 代码

<template><div class="testdiv" ref="testdiv">测试一下</div>
</template>
<script>
import { defineComponent, ref, reactive, onMounted } from 'vue';export default defineComponent({setup(props, { emit, slots, attrs }) {const testdiv = ref(null);onMounted(() => {test();});const test = () => {console.log('testdiv', testdiv, testdiv.value.innerHTML, testdiv.value.clientWidth);};return{testdiv}}})
</script>

3.结果

4.注意不能使用 reactive 声明变量,使用reactive声明得不到DOM的引用，结果如图2-2所示

1）代码

<template><div class="testdiv" ref="testdiv">测试一下</div>
</template>
<script>
import { defineComponent, ref, reactive, onMounted } from 'vue';export default defineComponent({setup(props, { emit, slots, attrs }) {const testdiv = reactive({});onMounted(() => {test();});const test = () => {console.log("testdiv",testdiv,testdiv.innerHTML,testdiv.clientWidth)};return{testdiv}}})
</script>

2）结果

三、总结

1.setup中使用ref: DOM上添加ref="xxx",setup中定义一个 ref变量xxx,并且return出去，则xxx.value就是DOM的引用，可以用 xxx.value直接使用DOM元素里面的方法和属性

2.应用场景：ref主要用于在父组件中需要直接使用子组件的方法和属性。

3.注：必须等到页面加载完之后才可以用 ref获取DOM，否则会报错的，找不到DOM。所以一般在函数中使用ref.

希望对你有帮助！

如有错误，欢迎指正！非常感谢！

setup中使用ref相关推荐

Vue3 Composition API（二）——computed、watchEffect、setup中使用ref
一.computed 在前面我们讲解过计算属性computed:当我们的某些属性是依赖其他状态时,我们可以使用计算属性来处理在前面的Options API中,我们是使用computed选项来完成的: ...
使用customRef自定义ref，解决setup中处理异步问题。
setup中不允许使用async.await使用customRef可以让请求到的数据自动获取响应式状态详见下方demo <template><div>{{ num }}< ...
vue3 setup中父组件通过Ref调用子组件的方法
在setup()钩子函数中调用父组件 <template><div>我是父组件<children ref="childrenRef" />&l ...
Vue3学习之第四节：setup()中使用watch、watchEffect 函数
一.watch 监听 import { ref, watch, reactive } from 'vue'export default {setup(){let str = ref('')let ms ...
setup中使用watch
watch属性监听器的作用在vue3.0中没有改变,还是监听值得变化. 在vue3.0中,仍然支持watch配置项.但是我们要在setup中使用watch得话,我们要导入watch的API,然后往wa ...
compostion-api(setup中） watch使用细节
目录一.监听某一个对象二.监听对象的一个属性三.监听多个对象或对象的属性四.组合式api 监听的到底是什么? 五.总结前提(currentOperaMsg是一个响应式对象) 以下所述的wat ...
Vue3中自定义ref
文章目录使用ref 使用customRef自定义ref 使用ref main.js import { createApp } from 'vue' import App from './App.vu ...
在 Inno Setup 中实现倒数N秒后激活按钮
在 Inno Setup 中实现倒数N秒后激活按钮原文 http://restools.hanzify.org/article.asp?id=67 timectrl.dll 为一个 6.5 KB 的 ...
C#中关键字ref与out的区别（转）
C#中关键字ref与out的区别(转) 在C#中,ref与out是很特殊的两个关键字.使用它们,可以使参数按照引用来传递. 总的来说,通常我们向方法中传递的是值.方法获得的是这些值的一个拷贝,然后使用 ...

setup中使用ref

一、问题

二、解决方法

三、总结

setup中使用ref相关推荐

最新文章

热门文章