391 vue获取组件（获取DOM元素） - refs

十五、获取组件（获取DOM元素） - refs

说明： vm.$refs 一个对象，持有已注册过 ref 的所有子组件 ( HTML 元素)

使用：

// $refs = {  div ： div元素， child：child组件 }
// 标签
<div ref="div">哈哈</div>
// 组件 
<child ref="child"></child>

注意： mounted 中使用

// mounted 操作DOM
* this.$refs.div
* this.$refs.child

注意点：如果获取的是一个子组件，那么通过 ref 就能获取到子组件中的 data 和 methods
```
this.$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>

391 vue获取组件（获取DOM元素） - refs

十五、获取组件（获取DOM元素） - refs

猜你喜欢