vue基本使用-refs获取组件或元素的实例

首先，需要了解refs是Vue提供的一个用于获取组件或DOM元素的实例的方法。因为在Vue中，父组件无法直接访问到子组件的实例或子节点的DOM元素，因此refs可以有效地帮助我们访问到这些内容。下面就是refs的使用攻略。

一、创建ref

我们可以通过在DOM元素上添加特殊的ref属性来创建refs。这个属性的值一般是一个字符串，被用来唯一标识该DOM元素或组件实例。例如，在下面的代码中，我们给一个input元素设置了ref属性并指定名称为inputBox：

<input type="text" ref="inputBox">

同时，在vue的组件选项中，在mounted的生命周期中，我们可以获取到这个input元素的引用：

export default {
  mounted() {
    console.log(this.$refs.inputBox);
  }
}

其中，this.$refs是一个对象，它的属性是我们在HTML中定义的ref名称，对应的值就是该DOM元素的引用。

二、在组件上创建ref

同样地，我们也可以针对Vue组件，使用ref来获取组件实例的引用。例如，我们定义一个名为myComponent的Vue组件，然后在某个父组件中使用它，并设置ref属性为myRef：

<template>
  <my-component ref="myRef"/>
</template>

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

export default {
  components: { MyComponent }
}
</script>

那么，在父组件中，我们就可以通过this.$refs来访问该组件实例中的属性或方法。例如，我们可以在父组件的某个方法中访问子组件的doSomething()方法：

export default {
  // ...

  methods: {
    parentMethod() {
      const myComponentInstance = this.$refs.myRef;
      myComponentInstance.doSomething();
    }
  }
}

在这个例子中，myRef对应的就是MyComponent组件实例中的属性或方法的引用。

三、示例一：获取用户输入并修改数据

下面举一个示例来说明如何使用refs来获取用户输入的元素，进而修改数据。

在下面的代码中，我们定义了一个叫做UserInput的组件，其中包含了一个input元素：

<template>
  <input type="text" ref="userInput" @blur="updateUserInput">
</template>

<script>
export default {
  methods: {
    updateUserInput() {
      const userInput = this.$refs.userInput.value;
      this.$emit('inputChange', userInput);
    }
  }
}
</script>

注意到我们给这个input元素设置了一个blur事件，该事件会在input元素失去焦点时触发。同时我们在updateUserInput方法中获取了用户输入并将输入值通过this.$emit()方法向父组件派发一个自定义事件inputChange。这个事件会告诉父组件，用户输入了什么数据。

在父组件中引入UserInput组件，并通过v-model指令绑定了一个名为userInput的数据项：

<template>
  <div>
    <user-input v-model="userInput" @inputChange="updateInput"/>
  </div>
</template>

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

export default {
  components: { UserInput },

  data() {
    return {
      userInput: ''
    }
  },

  methods: {
    updateInput(newInput) {
      this.userInput = newInput;
    }
  }
}
</script>

那么，当用户在UserInput组件中输入了数据并失去焦点后，我们就可以获取到这个输入框的值，并将其赋值给userInput。

四、示例二：动态设置DOM元素样式

另一个refs的常见用例是动态地修改DOM元素的样式。在下面的示例中，我们创建了一个名为Colors的组件，该组件包含3个颜色按钮。当用户点击某一个按钮时，我们会获取该按钮的引用，进而修改按钮的样式以及执行一些其他的逻辑：

<template>
  <div>
    <button ref="redButton" @click="setRed">Red</button>
    <button ref="greenButton" @click="setGreen">Green</button>
    <button ref="blueButton" @click="setBlue">Blue</button>
  </div>
</template>

<script>
export default {
  methods: {
    setRed() {
      this.resetColors();
      this.$refs.redButton.style.backgroundColor = 'red';
    },

    setGreen() {
      this.resetColors();
      this.$refs.greenButton.style.backgroundColor = 'green';
    },

    setBlue() {
      this.resetColors();
      this.$refs.blueButton.style.backgroundColor = 'blue';
    },

    resetColors() {
      for(let buttonName in this.$refs) {
        this.$refs[buttonName].style.backgroundColor = 'white';
      }
    }
  }
}
</script>

在这段代码中，我们分别给3个颜色按钮绑定了点击事件，并在每个事件中获取了该按钮的引用。然后，我们通过直接修改样式的方式，将该按钮的背景颜色设为对应的颜色。当用户点击其他按钮时，我们会将所有的按钮背景恢复为白色。