18、ref引用

1、什么是 ref 引用

• ref 用来辅助开发者在不依赖于 jQuery 的情况下，获取 DOM 元素或组件的引用。 每个 vue 的组件实例上，都包含一个 refs 对象，里面存储着对应的 DOM 元素或组件的引用。默认情况下， 组件的 $refs 指向一个空对象

2、使用 ref 引用 DOM 元素

<template>
  <div class="fatherContainer">
    <!-- 使用ref属性，为对应的DOM 添加引用名称 -->
    <h3 ref="h3">父亲组件</h3>
    <p>
      父组件中 msg 的值：<b>{{ msg }}</b>
    </p>
    <button @click="sendMsg">发送数据</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "为中华之崛起而读书!",
    };
  },
  methods: {
    sendMsg() {
      console.log(this.$refs.h3);
      //this.$refs.h3 获取DOM元素的引用
      this.$refs.h3.style.color = "blue";
      bus.$emit("share", this.msg);
    },
  },
};
</script>
<style lang="less" scoped>
.fatherContainer {
  background-color: springgreen;
}
</style>

3、使用 ref 引用 组件实例

<template>
  <div class="fatherContainer">
    <h3 ref="h3">父亲组件</h3>
    <p>
      父组件中 msg 的值：<b>{{ msg }}</b>
    </p>
    <button @click="sendMsg">发送数据</button>
    <button @click="getDOMRef">获取DOM引用</button>
    <button @click="getRef">获取组件引用</button>
    <!--使用ref 为组件添加引用名称-->
    <son ref="sonRef"></son>
  </div>
</template>

<script>
import son from "@/components/son.vue";
export default {
  components: {
    son,
  },
  data() {
    return {
      msg: "为中华之崛起而读书!",
    };
  },
  methods: {
    sendMsg() {
      bus.$emit("share", this.msg);
    },
    getDOMRef() {
      console.log(this.$refs.h3);
      this.$refs.h3.style.color = "blue";
    },
    getRef() {
      //this.$refs.sonRef 可以引用组件的实例
      console.log(this.$refs.sonRef);
      //通过引用组件的实例来调用组件methods中的方法
      this.$refs.sonRef.add();
    },
  },
};
</script>
<style lang="less" scoped>
.fatherContainer {
  background-color: springgreen;
}
</style>

4、控制文本框和按钮的按需切换

• 组件的 $nextTick(cb) 方法，会把 cb 回调推迟到下一个 DOM 更新周期之后执行。通俗的理解是：等组件的 DOM 更新完成之后，再执行 cb 回调函数。从而能保证 cb 回调函数可以操作到最新的 DOM 元素

<template>
  <div class="testContainer">
    <input @blur="showButton" type="text" v-if="inputVisible" ref="inputRef" />
    <button v-else @click="showInput">显示input输入框</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputVisible: false,
    };
  },
  methods: {
    showInput() {
      this.inputVisible = true;
      console.log(this.$refs.inputRef);
      this.$nextTick(() => {
        this.$refs.inputRef.focus();
      });
    },
    showButton() {
      this.inputVisible = false;
    },
  },
};
</script>

<style lang="less">
.testContainer {
  background-color: coral;
}
</style>