vue使用之ref

访问子组件实例或子元素

<base-input ref="usernameInput"></base-input>

现在在你已经定义了这个 ref 的组件里，你可以使用：

this.$refs.usernameInput

来访问这个 <base-input> 实例，以便不时之需。比如程序化地从一个父级组件聚焦这个输入框。在刚才那个例子中，该 <base-input> 组件也可以使用一个类似的 ref 提供对内部这个指定元素的访问，例如：

<input ref="input">

甚至可以通过其父级组件定义方法：
在子组件script里面

methods: {
  // 用来从父级组件聚焦输入框
  testFocus: function () {
    this.$refs.input.focus()
  }
}

这样就允许父级组件通过下面的代码聚焦 里的输入框：
在父组件里面：

this.$refs.usernameInput.testFocus()

当 ref 和 v-for 一起使用的时候，你得到的引用将会是一个包含了对应数据源的这些子组件的数组。代码如下：

<template>
  <div class="about">
    <div class="addinput" v-for="(item, index) in List" :key="index">
      <input ref="input" v-model="item.input1" />
      <button @click="focus(item, index)" class="button">
        点击我聚焦input框
      </button>
      <button @click="addinput">增加</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "about",
  components: {},
  data() {
    return {
      List: [{ input1: "" }]
    };
  },
  mounted() {},
  methods: {
    focus(item, index) {
      this.$refs.input[index].focus();
    },
    addinput() {
      let obj = { input1: "" };
      this.List.push(obj);
    }
  }
};
</script>

<style lang="less" scoped>
.about {
  button {
    margin-left: 10px;
  }
}
</style>

父组件还可以直接访问子组件的方法和数据
父组件：

<template>
  <div class="about">
    <child ref="input"></child>
    <button @click="clear">点击我清空input框</button>
  </div>
</template>

<script>
import child from "@/components/child.vue";
export default {
  name: "about",
  components: {
    child
  },
  data() {
    return {};
  },
  mounted() {},
  methods: {
    clear() {
      this.$refs.input.clean();
      //this.$refs.input.val=""
    }
  }
};
</script>

<style lang="less" scoped>
.about {
  button {
    margin-left: 10px;
  }
}
</style>

子组件：

<template>
  <div class="child">
    <input v-model="val" />
  </div>
</template>

<script>
export default {
  name: "child",
  data() {
    return {
      val: ""
    };
  },
  mounted() {},
  methods: {
    clean() {
      this.val = "";
    }
  }
};
</script>

<style lang="less" scoped></style>