Vue中ref的作用

4,355 阅读1分钟

谈到ref大家第一反应可能就是获取dom元素,其实他的作用远不止这一个。当ref指向子组件时,能够获取到子组件的data,也能调用子组件的方法

基本用法——获取DOM元素

// HTML
<div ref="myref">123</div>

// JS
let myDOM = this.$refs.myref;
console.log(myDOM); // <div data-v-4bf94fa0>123</div>

进阶用法——获取子组件中的data

// 子组件
<template>
  <div>
    我是子组件
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "myhua"
    };
  }
};
</script>


// 父组件

<template>
  <div id="app">
    <Son ref="myref"></Son>
  </div>
</template>

<script>
import Son from "./components/son";
export default {
  mounted() {
    console.log(this.$refs.myref.name);
  },
  components: {
    Son
  }
};
</script>

Result

进阶用法——调用子组件中的方法

// 子组件
<template>
  <div>
    我是子组件
  </div>
</template>

<script>
export default {
  methods: {
    logName() {
      console.log("myhua!!");
    }
  }
};
</script>


// 父组件

<template>
  <div id="app">
    <Son ref="myref"></Son>
  </div>
</template>

<script>
import Son from "./components/son";
export default {
  mounted() {
    this.$refs.myref.logName();
  },
  components: {
    Son
  }
};
</script>

Result

最后

当ref指向组件时,我们通过this.$refs得到的其实是子组件的实例,因此我们可以来完成一些事情。不过这些目前我还没有用着,先记着,指不定哪天出去面试的时候可以忽悠一下。