src_ref属性
# 代码
# 代码路径
$ tree -N
.
├── App.vue
├── components
│ └── School.vue
└── main.js
1
2
3
4
5
6
2
3
4
5
6
# App.vue
<template>
<div>
<h1 v-text="msg" ref="title"></h1>
<button ref="btn" @click="showDOM">点我输出上方的DOM元素</button>
<School ref="sch" />
</div>
</template>
<script>
import School from './components/School.vue'
export default {
name:'App',
components:{School},
data() {
return {
msg:'hi'
}
},
methods: {
showDOM(){
console.log(this.$refs.title); // 真实DOM元素
console.log(this.$refs.btn); // 真实DOM元素
console.log(this.$refs.sch); // school组件的实例对象
}
},
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
# School.vue
<template>
<div>
<h2>学校名称：{{name}} </h2>
<h2>学校地址：{{addr}} </h2>
</div>
</template>
<script>
export default {
name:'School',
data() {
return {
name:'shangguigu',
addr:'beijing'
}
},
}
</script>
<style>
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# main.js
import Vue from "vue"
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
el: '#app',
components:{App},
render: h => h(App)
});
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 笔记
# 关于 ref 属性
- 被用来给元素或子组件注册引用信息（id 的替代者）
- 应用在 html 标签上获取的是真实 DOM 元素，应用在组件标签上是组件实例对象（vc）
- 使用方式：
- 打标识：
<h1 ref="xxx">.....</h1>或<School ref="xxx"></School> - 获取：
this.$refs.xxx
上次更新: 2024/02/28, 13:00:35
|