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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# 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/06/13, 22:13:45
|