023_标签的ref属性
3.11 【标签的ref属性】
作用: 用于注册模板引用。
1，用在普通DOM标签上，获取的是DOM节点
2, 用在组件标签上，获取的是组件实例对象。
笔记
在 vue2 项目中就，ref就是为节点打标识的
删除所有的结构和脚本,得到如下所示页面
通过JS代码去获取页面上的DOM元素
获取到DOM元素在打印
vue2的写法 App.vue
vue3的写法 App.vue
vue3 引入的Person会自动return,return结束,模板里面就可以使用了
APP组件先于Person组件渲染 所以结果出事了
App组件渲染结束了Person你才出来 这样的话 id就冲突了
Person里面写的北京怎么变成您好了？这可怎么办？不用id，使用ref解决
绿色代码表示: 给北京 h2这个DOM元素存储到 title2 这个容器里面
使用 ref 就就可以解决两个同名title2冲突问题 ref就是打标识,有点局部变量的感觉。
局部样式
scoped 范围只能是你上方模板里面的内容取作用
上面ref 加在 html 标签上，还没有将 ref 加在组件标签上
html 标签
绿色的是组件标签
定义a,b,c 响应式数据并初始化
person.value有三个数据
将 ref 放在html上拿到的是DOM,在将 ref 放到组件上，我们能拿到上面组件实例对象
父组件 App
子组件 Person
可以看 a,b,c
可以看 a,b
标签的ref属性 实现代码如下
1, src/components/Person.vue
<template>
<div class="person">
<h1>中国</h1>
<h2 ref="title2">北京</h2>
<h3>尚硅谷</h3>
<button @click="showLog">点我输出h2这个元素</button>
</div>
</template>
<script setup lang="ts" name="Person">
import { ref, defineExpose} from 'vue'
// 创建一个title2的响应式引用，用来保存h2元素对象
let title2 = ref()
let a = ref(0)
let b = ref(1)
let c = ref(2)
function showLog() {
console.log(title2.value)
// console.log(title2.$el)
// console.log(title2._vnode.el)
}
defineExpose({
a,
b,
c
})
</script>
<style scoped>
.person {
background-color: skyblue;
box-shadow: 0 0 10px;
border-radius: 10px;
padding: 20px;
}
button {
margin: 0 5px;
}
li {
font-size: 20px;
}
</style>
2, src/App.vue
<template>
<div class="app">
<h2 ref="title2">您好</h2>
<button @click="showLog">测试</button>
<Person ref="ren" />
</div>
</template>
<script setup lang="ts" name="App">
import Person from './components/Person.vue';
import { ref } from 'vue';
let title2 = ref();
let ren = ref();
function showLog() {
// console.log(title2.value);
console.log(ren.value);
}
</script>
<style scoped>
.app {
background-color: #ddd;
box-shadow: 0 0 10px;
border-radius: 10px;
padding: 20px;
}
</style>
3, src/main.ts
// 引入 createApp 用于创建应用
import {createApp} from 'vue'
// 引入 App根组件
import App from './App.vue'
// 调用createApp()方法创建应用并放在id为app的容器里面
createApp(App).mount('#app')
4, index.html
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>