vuejs之父子组件访问【$refs】【$children】

在Vue中，我们不用依赖原生JS或jQuery等第三方库获取DOM节点，据官方所示，元素绑定ref后，父组件可以直接通过调用this.$refs即可得到整个目标对象，提高了获取DOM节点的效率。

父组件访问子组件

$refs 

$refs（reference 缩略）：一个持有注册过ref attribute 的所有 DOM 元素和组件实例。本质是一个对象。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向该子组件实例。通俗讲，refs特性就是为元素或子组件赋予一个class/id引用，通过this.$refs.refName来访问元素或子组件的实例。

 代码示例：

<!-- 父组件 -->
  <div id="app">

    <cpn></cpn>
    <cpn></cpn>
    <cpn ref="aaa"></cpn>
    <button @click="btnClick" >按钮</button>

  </div>

  <!-- 子组件 -->
  <template id="cpn">

    <div>
      我是子组件
    </div>
  </template>

 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <script>
    // 父传子：props
    const cpn = {
      template: "#cpn",
      data() {
        return {
          name:"我是子组件的name"
        }
      },
      methods: {

      },
    };
    const app = new Vue({
      el: "#app",
      data() {
  
      },
      methods: {
        btnClick(){

           // 使用 $ref
           console.log(this.$refs);
           console.log(this.$refs.aaa.name)

        }
      },
      components: {
        cpn
      },
    })
  </script>

输出结果：

 this.$refs是一个对象类型，默认是个空对象({})，叫做VueComponent，并伴有标识符aaa。展开后可操作其挂载的数据和调用上面的方法。

另外当ref和v-for一起使用时，获得的引用将会是一个数组，包含循环数组源：

<template>
  <div>
    <div ref="myDiv" v-for="(item, index) in arr" :key="index">{{item}}</div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      arr: ['one', 'two', 'three', 'four']
    }
  },
  mounted() {
    console.log(this.$refs.myDiv)
  }
}
</script>

输出结果：

  

注： $refs 只会在组件渲染完成之后生效，并且它们不是响应式的。这仅作为一个用于直接操作子组件的“逃生舱”——你应该避免在模板或计算属性中访问 $refs。

$children

代码示例： 

 <!-- 父组件 -->
  <div id="app">

    <cpn></cpn>
    <cpn></cpn>
    <cpn></cpn>
    <button @click="btnClick" >按钮</button>

  </div>

  <!-- 子组件 -->
  <template id="cpn">
    <div>
      我是子组件
    </div>
  </template>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <script>
    // 父传子：props
    const cpn = {
      template: "#cpn",
      data() {

      },
      methods: {
        showMessage(){
          console.log("showMessage");
        }
      },
    };
    const app = new Vue({
      el: "#app",
      data() {
    
      },
      methods: {
        btnClick(){
          // 使用 $children
          console.log(this.$children)
          console.log(this.$children[0].showMessage)
          for (let cpn of this.$children) {
            console.log(cpn.showMessage)
          }
        }
      },
      components: {
        cpn
      },
    })
  </script>

输出结果：

 

可见 this.$children 获取的是数组类型，也是叫VueComponent，展开后可以对其内部数据和方法进行调用。

缺点： 需要手动传入索引指定子组件，较繁琐，开发不常用。

  

 参考：https://blog.csdn.net/qq_38128179/article/details/88876060        https://v2.cn.vuejs.org/v2/guide/components-edge-cases.html#%E8%AE%BF%E9%97%AE%E5%AD%90%E7%BB%84%E4%BB%B6%E5%AE%9E%E4%BE%8B%E6%88%96%E5%AD%90%E5%85%83%E7%B4%A0