VUE中$refs的基本用法举例

接下来将为您详细讲解“VUE中$refs的基本用法举例”的完整攻略。

简介

在Vue中，$refs 指令用于获取子组件或子 dom 元素的引用。通过$refs指令，可以获取组件或元素的所有属性和方法，实现父子组件之间的通信。

基本用法

在使用Vue中的$refs指令时，通常需要在组件或dom元素上设置ref属性，这样在，就可以在父组件中使用$refs访问到子组件或子元素了。例如：

<template>
  <div>
    <p ref="msg">{{ message }}</p>
    <button @click="changeMessage">修改内容</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello world!"
    };
  },
  methods: {
    changeMessage() {
      this.$refs.msg.innerText = "Hello Vue!";
    }
  }
};
</script>

上述代码表示，在data中定义了一个message数据，同时在模板中定义了一个p标签，并设置ref="msg"属性，然后在methods中定义了一个changeMessage方法，当按钮被点击时，该方法会将p标签的内容修改为"Hello Vue!"。

示例1：获取子组件的引用

可以通过$refs指令获取到子组件的引用，然后通过这个引用来调用子组件的属性或方法。例如：

<!-- 父组件 -->
<template>
  <div>
    <child-component ref="child"></child-component>
    <button @click="changeChildText">修改子组件内容</button>
  </div>
</template>

<script>
import ChildComponent from "./ChildComponent.vue";
export default {
  components: {
    ChildComponent
  },
  methods: {
    changeChildText() {
      this.$refs.child.text = "I am child component!";
    }
  }
};
</script>

<!-- 子组件 ChildComponent.vue -->
<template>
  <div>{{ text }}</div>
</template>

<script>
export default {
  data() {
    return {
      text: "I am a child component."
    };
  }
}
</script>

上述代码表示，在父模板中使用组件的方式引入了一个子组件，并设置ref="child"属性。然后在父组件的methods中定义了一个changeChildText方法，该方法通过this.$refs.child获取到子组件的引用，然后通过引用调用子组件的属性text，将其修改为"I am child component!"。

示例2：获取dom元素的引用

可以通过$refs指令获取到dom元素的引用，然后通过这个引用来修改dom元素的属性或方法。例如：

<template>
  <div>
    <input type="text" ref="input">
    <button @click="getText">获取输入框中的内容</button>
  </div>
</template>

<script>
export default {
  methods: {
    getText() {
      const inputValue = this.$refs.input.value;
      alert(`输入的内容是：${inputValue}`);
    }
  }
};
</script> 

上述代码表示，在模板中定义了一个输入框和一个按钮，并给输入框设置了ref="input"属性。然后在methods中定义了一个getText方法，该方法通过this.$refs.input获取到输入框的引用，然后通过引用来获取输入框的value值，并弹出该值的提示框。

结论

$refs指令是Vue中非常重要的一个指令，能够实现父子组件的通信和方便的对dom元素进行操作。使用$refs指令时，需要注意设置ref属性，并且不要跨层级使用，否则会造成不必要的困扰。