391 vue $refs：vue获取组件、DOM元素

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

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

ref如果是绑定在组件中的, 那么通过this.$refs.refname获取到的是一个组件对象.
ref如果是绑定在普通的元素中, 那么通过this.$refs.refname获取到的是一个元素对象.

  • 使用 ：

    1. 注册
    // $refs = {  div ： div元素， child：child组件 }
// 标签 
<div ref="div">哈哈</div>
// 组件 
<child ref="child"></child>
    1. 注意 ： 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>

posted on 2020-03-20 08:45  冲啊！  阅读(5837)  评论(0)  编辑  收藏  举报

导航