16.$refs和$parent和$root的使用

某些情况下，我们在组件中想要直接获取到元素对象或者子组件实例：

• 在Vue开发中我们是不推荐进行DOM操作的；
• 这个时候，我们可以给元素或者组件绑定一个ref的attribute属性；

组件实例有一个$refs属性：

• 它一个对象Object，持有注册过 ref attribute 的所有 DOM 元素和组件实例。

App.vue

<template>
  <div>
    <h1 ref="h1">今天天气不错</h1>
    <home ref="home"></home>
    <button @click="getRefs">获取$refs</button>
  </div>
</template>

<script>
import Home from "./Home.vue";
export default {
  components: {
    Home,
  },
  data() {
    return {};
  },
  methods: {
    getRefs() {
      console.log(this.$refs.h1);
      this.$refs.home.btnClick();
      console.log(this.$refs.home.title);
      console.log(this.$refs.home.$el);
    },
  },
};
</script>

<style scoped></style>

Home.vue

<template>
  <div>
    {{ title }}
    <button @click="btnClick">按钮</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "我是home",
    };
  },
  methods: {
    btnClick() {
      console.log("点击了按钮");
    },
  },
};
</script>

<style scoped></style>

image.png

$parent和$root

可以在子组件中通过$parent访问父组件，通过$root访问根组件
注意：在Vue3中已经移除了$children的属性，所以不可以使用了。

<template>
  <div>
    {{ title }}
    <button @click="btnClick">按钮</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "我是home",
    };
  },
  methods: {
    btnClick() {
      console.log("点击了按钮");
      console.log(this.$parent)
      console.log(this.$root)
    },
  },
};
</script>

<style scoped></style>

此文档主要内容来源于王红元老师的vue3+ts视频教程