ref的使用

最新推荐文章于 2024-02-06 17:50:43 发布

秃头的科比

最新推荐文章于 2024-02-06 17:50:43 发布

阅读量169

点赞数

分类专栏： VUE 文章标签： vue

本文链接：https://blog.csdn.net/weixin_43933771/article/details/119022674

版权

VUE 专栏收录该内容

14 篇文章 2 订阅

订阅专栏

这篇博客介绍了在Vue.js中如何使用ref属性来直接访问元素或子组件实例，包括获取元素、读取子组件数据和调用子组件方法。同时也提到了在Vue3中$children属性的移除，并展示了通过$parent和$root获取父组件和根组件的方法。

摘要由CSDN通过智能技术生成

ref的使用

某些情况下，我们在组件中想要直接获取到元素对象或者子组件实例：在vue开发中我们是不推荐DOM操作的，这个时候，我们可以给元素或者组件绑定一个ref的attribute属性，而组件实例有一个$refs属性。

//父组件
<template>
  <div>
    <!-- 绑定到一个元素上 -->
    <h2 ref="title">哈哈哈</h2>

    <!-- 绑定到一个组件实例上 -->
    <nav-bar ref="navBar"></nav-bar>

    <button @click="btnClick">获取元素</button>
  </div>
</template>

<script>
  import NavBar from './NavBar.vue';

  export default {
    components: {
      NavBar
    },
    data() {
      return {
        names: ["abc", "cba"]
      }
    },
    methods: {
      btnClick() {
        console.log(this.$refs.title);

        //是可以直接获取到子组件中的数据的
        console.log(this.$refs.navBar.message);
        //也是可以直接获取到子组件中的方法的
        this.$refs.navBar.sayHello();

        // $el
        console.log(this.$refs.navBar.$el);
      }
    }
  }
</script>

我们也可以通过 $p a r e n t 和$ root来访问父组件。

<template>
  <div>
    <h2>NavBar</h2>
    <button @click="getParentAndRoot">获取父组件和根组件</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        message: "我是NavBar中的message"
      }
    },
    methods: {
      sayHello() {
        console.log("Hello NavBar");
      },
      getParentAndRoot() {
        //获取父组件
        console.log(this.$parent);
        //获取根组件
        console.log(this.$root);
      }
    }
  }
</script>

注意：在vue3中已经移除了$children的属性，所以不可以使用了。