【Vue】vue文件外通过ref获取元素

问题描述

• 我在abc.js写HomeView.vue的逻辑代码
• 我要在abc.js里，获取HomeView.vue组件里ref为test的元素

码

abc.js

• 导出test

import { ref } from 'vue'
const  test = ref()
export {
 test 
} 

HomeView.vue

• 引入test
• 注意： ref不能加冒号，也就是:ref="test"
  • 加冒号会返回undefined
  • 不引入test也是undefined

<template>
  <div ref="test">我是test元素</div>
</template>
<script setup> 
import {  ref } from "vue";
import { test } from "./abc.js";
<script>

总结

• 在vue外部通过ref获取元素。js文件引入ref，命名一个地方存储，并导出，例如

import { ref } from 'vue'
const  test = ref()
export {
 test 
} 

• 引入时无需添加冒号，例如

<template>
  <div ref="test">我是test元素</div>
</template>
<script setup> 
import {  ref } from "vue";
import { test } from "./abc.js";
<script>