Vue3魔法手册 作者 张天禹 07_标签

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>