在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

 

 

Logo

前往低代码交流专区

更多推荐