组件间的调用

特殊属性ref

ref是什么

ref是一个特殊属性，用于在Vue实例中注册一个引用信息。一个元素或者组件通过ref注册后（打上标签后），则可以通过vue实例进行获取该标签或者组件实例对象。这样，我们可以轻松地在Vue的生命周期钩子函数或方法中操作这些元素或组件。

它是获取元素的一种方式（可以当成——通过id获取元素的替代者）。

获取方式

this.$refs.xxx

但要切记，要先注入（给元素打上标签）后，才能获取.以下是一个简单的例子：

<template>
  <div>
    <input ref="input" type="text" placeholder="输入内容">
    <button @click="handleButtonClick">点击按钮</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleButtonClick() {
      // 通过this.$refs获取到input元素的引用，然后可以对其进行操作
      const inputElement = this.$refs.input;
      inputElement.value = "被修改的值"; // 修改输入框的值
    }
  }
};
</script>

除了获取传统标签以外，还能对组件进行标签跟捕获：

<template>
  <div>
    <ChildComponent ref="childRef"></ChildComponent>
    <button @click="handleButtonClick">点击按钮</button>
  </div>
</template>

<script>
import ChildComponent from "./ChildComponent.vue";

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleButtonClick() {
      // 通过this.$refs获取到ChildComponent实例的引用，然后可以对其进行操作
      const childComponentInstance = this.$refs.childRef;
      // 调用ChildComponent实例的方法或访问其数据属性
    }
  }
};
</script>

注意

应用在html标签上获取的是真实Dom元素，应用在组件标签上获取的是组件实例对象（VueComponent）