赞
踩
作用:用于注册模版引用
用在普通DOM标签上,获取的是DOM节点
用在组件标签上,获取的是组件实例对象
- <template>
- <div class="person">
- <h1>中国</h1>
- <h2 ref="2">湖北</h2>
- <h3>武汉</h3>
- <button @click="showLog">点我获取h2标签内容</button>
- </div>
- </template>
-
- <script lang="ts" setup name="text2">
- import { ref } from 'vue'
-
- // 创建一个title2,用于存储 ref 标记的内容
- let title2 = ref()
- function showLog() {
- console.log('h2标签', title2.value);
- }
-
- </script>
获取的是DOM节点,这里打印的是 <h2>湖北</h2>
- <template>
- <text1 ref="cs" />
- <button @click="showLog">点击获取ref</button>
- </template>
-
- <script lang="ts" setup name="text2">
- import text1 from './text1.vue'
- import { ref } from 'vue'
-
- // 创建一个abc,用于存储 ref 标记的内容
- let abc= ref()
- function showLog() {
- console.log('ref', abc.value);
- }
-
- </script>
-
-
- //-------以下为 text1的内容
- <script lang="ts" setup name="text2">
- import { ref, defineExpose } from 'vue'
-
- // 数据
- let a = ref(0)
- let b = ref(1)
- let c = ref(2)
-
- defineExpose({a, b}
- </script>
获取的是组件实例对象,打印的值取决于 组件内 defineExpose 导出的值
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。