vue3标签中的ref属性&怎样使用$refs获取元素
[*]用在普通DOM标签上，获取的是DOM节点。
[*]用在组件标签上，获取的是组件实例对象。
用在普通DOM标签中
获取dom元素方法一：
[*] 在需要获取的元素标签上添加ref属性
[*] 创建ref对象，存储ref属性标记的内容
[*] 通过ref上的value属性即可获取当前dom元素
{{ person.name }}
{{ person.age }} {{ person.gender }}
获取dom元素方法二：
getCurrentInstance()：获取当前组件实例
[*] 在需要获取的元素标签上添加ref属性
[*] 通过getCurrentInstance解构出proxy
[*] 通过proxy.$refs.xxx即可获取当前dom元素
{{ person.name }}
{{ person.age }} {{ person.gender }}
用在组件标签上
defineExpose作用：向外暴露属性
<!-- 父组件 -->
<template>
<Demo ref="demoRef"></Demo>
</template>
<script setup>
import { ref, onMounted } from "vue";
import Demo from "./components/Demo.vue";
let demoRef = ref();
onMounted(() => {
console.log(demoRef.value);// 访问子组件Demo中的属性
});
</script>
<!-- 子组件 -->
<template>
<p>{{ person.name }}</p>
<div>{{ person.age }}</div>
<p>{{ person.gender }}</p>
</template>
<script setup>
import { ref, reactive, computed, getCurrentInstance, onMounted } from "vue";
const person = reactive({
name: "neko",
age: 18,
gender: "女",
});
let num1 = ref(0);
let num2 = ref(1);
let num3 = ref(2);
<!-- 使用defineExpose将组件中的数据交给外部，这样父组件中的demoRef.value才可以访问到如下数据 -->
defineExpose({ num1, num2, num3, person });
</script>
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]