前言

系列文章目录：
[Vue]目录
老师的课件笔记，不含视频 https://www.aliyundrive.com/s/B8sDe5u56BU

笔记在线版： https://note.youdao.com/s/5vP46EPC

视频：尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通

文章目录

前言
1. ref 属性
1.1 ref 属性的使用方式
1.1.1 标识元素或子组件
1.1.2 获取标识的元素或子组件

1.2 使用 ref 属性标记 html 标签元素
1.3 使用 ref 属性标记子组件
1.4 使用 id 获取元素或子组件

1. ref 属性

ref 属性被用来给元素或子组件注册引用信息（id的替代者），相当于对页面元素或子组件标识，使用 ref 属性标识页面元素或子组件之后，被标识的元素或子组件会被所在的组件实例对象收集，挂载在所在组件实例对象的$ref属性上。

1.1 ref 属性的使用方式

1.1.1 标识元素或子组件

标记 html 标签元素：

<h1 ref="xxx">.....</h1>

标记子组件：

<School ref="xxx"></School>

1.1.2 获取标识的元素或子组件

this.$refs.xxx

其中，this为被标记的元素或子组件所在的组件实例对象。

1.2 使用 ref 属性标记 html 标签元素

ref 属性应用在 html 标签元素上，获取的是对应的真实 DOM 元素

<template><div><h1 ref="hello">Hello World</h1><button @click="showH1">showH1</button></div>
</template><script>
export default {name: 'App'methods: {showH1() {console.log(this.$refs.hello)console.log(this.$refs)}}
}
</script><style></style>

1.3 使用 ref 属性标记子组件

ref 属性应用在组件标签上，获取的是对应组件实例对象

MySchool组件：

<template><div class="demo"><h2>学校：{{name}}</h2><h2>地址：{{address}}</h2></div>
</template><script>
export default {name: 'MySchool',data() {return {name: 'SGG',address: 'Beijing'}},
}
</script><style>.demo {background-color: chocolate;}
</style>

App组件：

<template><div><h1 ref="hello">Hello World</h1><MySchool ref="myschool"></MySchool><button @click="showH1">showH1</button> <br><br><button @click="showMySchool">showMySchool</button></div>
</template><script>
// 导入子组件
import MySchool from './components/MySchool.vue'export default {name: 'App',components: {MySchool,},methods: {showH1() {console.log(this.$refs.hello)console.log(this.$refs)},showMySchool() {console.log(this.$refs.myschool)console.log(this.$refs)}}
}
</script><style></style>

1.4 使用 id 获取元素或子组件

<template><div><h1 ref="hello" id="hh">Hello World</h1><MySchool ref="myschool" id="school"></MySchool><button @click="showH1_School">showH1_School</button></div>
</template><script>
// 导入子组件
import MySchool from './components/MySchool.vue'export default {name: 'App',components: {MySchool},methods: {showH1_School() {console.log(document.getElementById('hh'))console.log(document.getElementById('school'))}}
}
</script><style>
</style>