$refs的作用及操作流程

$refs的的使用方法

作用:可以获取dom元素和子组件实例

获取到原生的dom标签

<template>
  <div>
    <h1 ref="myH1">1. ref获取原生dom</h1>
    <button @click="fn">点击修改上面内容</button>
  </div>
</template>

<script>
export default {
  methods: {
    fn() {
      console.log(this.$refs.myH1); // <h1></h1> 原生DOM标签
      this.$refs.myH1.innerHTML = "改内容了";
    }
  }
}
</script>

想要获取哪个dom标签,就在这个标签上定义一个ref=“自定义名字”,给button绑定一个点击事件,当我们点击按钮时,通过this.$refs.自定义名字就可以获取到这个原生dom标签

获取子组件对象

父组件代码示例:

<template>
  <div>
    <h1 ref="refH2">ref获取</h1>
    <MyCom ref="refCom"></MyCom>
    <button @click="fn2">点击获取组件对象</button>
  </div>
</template>
<script>
import MyCom from "./MyCom.vue";
export default {
  components: {
    MyCom,
  },
  methods: {
    fn2() {
     console.log(this.$refs.refCom); //子组件实例对象
      this.$refs.refCom.com(1000);
    },
  },
};
</script>

<style>
</style>

子组件代码示例:

<template>
  <div>
    <h2>{{ num }}</h2>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 100,
    };
  },
  methods: {
    com(n) {
      this.num = n;
    },
  },
};
</script>

<style>
</style>

想要获取哪个子组件对象,就在这个子组件上定义一个ref=“自定义名字”,给button绑定一个点击事件,当我们点击按钮时,通过this.$refs.自定义名字就可以获取到这个子组件对象

在控制台打印可以看到这个子组件实例,里面有很多的属性和方法,就比如com这个函数我们是在子组件中定义的,我们可以在父组件中拿到子组件实例,直接传参数调用这个方法