ARTICLE DETAIL

资讯详情

深耕网站建设、视觉设计与SEO优化的一线实战洞察。

Vue3学习——标签的ref属性

Vue3学习——标签的ref属性
  1. 在HTML标签上,可以使用相同的ref名称,得到DOM元素
  2. ref放在组件上时,拿到的是组件实例(组件defineExpose暴露谁,ref才可以看到谁)
<script setup lang="ts">
import RefPractice from '@/components/ref_practice.vue'
import {ref} from 'vue'
const practice = ref()
const chackRef = () =>{console.log(practice.value)
}
</script><template><RefPractice ref="practice" @click="chackRef"></RefPractice>
</template>

ref_practice.vue

<script setup lang="ts">
import {ref} from 'vue'const a= ref(1)
const b = ref(2)defineExpose({a}) // 只暴露a,所以父组件拿不到b</script><template><div class="refPractice"><div>ref标签</div></div></template>

在这里插入图片描述

返回列表