391 vue $refs：vue获取组件、DOM元素
十五、获取组件（获取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>
