十五、獲取組件（獲取DOM元素） - refs
- 說明 ：
vm.$refs一個對象， 持有已注冊過 ref 的所有子組件 ( HTML 元素)
ref如果是綁定在組件中的, 那么通過this.$refs.refname獲取到的是一個組件對象.
ref如果是綁定在普通的元素中, 那么通過this.$refs.refname獲取到的是一個元素對象.
-
使用 ：
- 注冊
// $refs = { div ： div元素， child：child組件 } // 標簽 <div ref="div">哈哈</div> // 組件 <child ref="child"></child>- 注意 ： mounted 中使用
// mounted 操作DOM * this.$refs.div * this.$refs.child -
注意點 ： 如果獲取的是一個子組件，那么通過 ref 就能獲取到子組件中的
data和methodsthis.$refs.child.num this.$refs.child.fn -
場景 ： 一般在第三方的組件中， 可能會用到這個功能
-
示例 ：
// 組件
<div ref="div">哈哈</div>
<child ref="child"></child>
// js
mounted() {
console.log(this.$refs.div)
console.log(this.$refs.child.fn)
}
04-refs.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<!--
以后在一些第三方框架里, 獲取dom元素/獲取組件，可以用 refs
1. refs： 對象格式 (鍵值對) 收集了一些 注冊過 ref 的元素/組件
2. 凡是注冊過 ref 的元素或者組件都會被refs收錄
3. 通過 this.$refs
總結 :
1. refs 可以獲取 dom元素/組件
2. 怎么獲取
- 注冊： ref='c' 【給一個唯一的屬性值，類似於id。】
- 獲取： this.$refs
-->
<div id="app">
<!--
refs
{
d : <div ref='d'>我是div</div>
p : <p ref='p'>我是p標簽</p>
}
-->
<div ref="d">我是div</div>
<p ref="p">我是p標簽</p>
<child ref="c"></child>
</div>
<script src="./vue.js"></script>
<script>
// 組件 看做是一個個可復用的ui模塊
// 組件的本質： vue 實例
Vue.component('child', {
template: `<div> 子組件 : </div>`,
data() {
return {
cmsg: '子組件里的數據'
}
}
})
const vm = new Vue({
el: '#app',
data: {},
created() { },
mounted() {
console.log(this.$refs) // {d: div, p: p, c: VueComponent}
// 可以通過 this.$refs 獲取dom元素/組件
console.log(this.$refs.d) // <div>我是div</div>
console.log(this.$refs.d.innerHTML) // 我是div
// 也可以獲取組件里的數據
// 父組件可以通過 refs 拿到子組件里的數據
console.log(this.$refs.c)
console.log(this.$refs.c.cmsg) // 子組件里的數據
}
})
</script>
</body>
</html>