Vue中ref的三种用法

失忆症患者_

已于 2022-04-15 10:32:23 修改

阅读量2.5w

点赞数 14

文章标签： vue.js javascript 前端

于 2022-01-24 17:26:19 首次发布

本文链接：https://blog.csdn.net/qq_41929578/article/details/122671455

版权

序言

最近在开发Vue项目，发现了一个ref的使用场景：将父组件中的值传递给子组件并且调用子组件的方法。

获取dom元素
获取子组件中的data
调用子组件中的方法

1.获取dom元素

通过`this.$refs.name`获取dom元素

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

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

2.获取子组件中的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); //输出子组件data中的name的值：myhua
  },
  components: {
    Son
  }
};
</script>

3.调用子组件中的方法

// 子组件
<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>