ref标签

作用：用于注册模板引用。

• 用在普通DOM标签上，获取的是DOM节点。
• 用在组件标签上，获取的是组件实例对象。

DOM：

<template><div class="person"><h2 ref="title2">上海</h2><button @click="showTitle2">显示title2</button></div>
</template><script lang="ts" setup name="Person">
import { ref, onMounted } from 'vue'
// 创建一个title2的ref
let title2 = ref();function showTitle2() {console.log(title2.value);
}
</script>

组件：

父组件：

<template><div id="app"><h2 ref="title2">北京</h2><button @click="showTitle2">显示title2</button><Person ref="psn" /></div>
</template><script lagn="ts" setup>import Person from './components/Person.vue';import { ref, onMounted } from 'vue';// 创建一个title2的reflet title2 = ref();let psn = ref();function showTitle2() {console.log(title2.value);}
</script><style scoped>.app {background-color: aqua;box-shadow: 0 0 10px rgba(0,0,0,0.1);}
</style>

子组件：

需要将想让父组件查看的ref标签导出。

使用：defineExpose。

<template><div class="person"><h2 ref="title2">上海</h2><button @click="showTitle2">显示title2</button></div>
</template><script lang="ts" setup name="Person">
import { ref, onMounted } from 'vue'
// 创建一个title2的ref
let title2 = ref();function showTitle2() {console.log(title2.value);
}defineExpose({title2
})
</script>

style的scoped

组件中<style>添加scoped属性表示：只有当前组件对应得模板<templete>内的可以使用，其他组件不能使用。

<template><div id="app"><h2 ref="title2">北京</h2><button @click="showTitle2">显示title2</button><Person ref="psn" /></div>
</template><script lagn="ts" setup>import Person from './components/Person.vue';import { ref, onMounted } from 'vue';// 创建一个title2的reflet title2 = ref();let psn = ref();function showTitle2() {console.log(title2.value);}
</script><style scoped>.app {background-color: aqua;box-shadow: 0 0 10px rgba(0,0,0,0.1);}
</style>