vue中ref的使用

ref获取标签

1.在标签中使用ref="自定义名字"

2.获取标签时使用this.$refs.自定义名字

<template>
  <div>
    <h1 ref="rui">锐雯</h1>
  </div>
</template>

<script>
export default {
  mounted() {
    console.log(document.querySelector("h1"));
    console.log(this.$refs.rui);
  },
};
</script>

<style>
</style>

由此可见ref+$refs可以获取真实的Dom节点。

但与原生方法获取Dom节点结果并无不同。

---

ref获取组件

那么ref不同在哪里呢？

 

子组件：

<template>
  <div>瑞文语录</div>
</template>

<script>
export default {
  methods: {
    say() {
      console.log("断剑重铸之日，骑士归来之时。");
    },
  },
};
</script>

<style>
</style>

App.vue

<template>
  <div>
    <ana id="ana" ref="ana"></ana>
  </div>
</template>

<script>
import ana from "./components/ana.vue";
export default {
  mounted() {
    console.log(document.querySelector("#ana"));
    console.log(this.$refs.ana);
  },
  components: {
    ana: ana,
  },
};
</script>

<style>
</style>

 

并且$refs还可以调用子组件的方法