Vue中ref的三种用法

来源：爱够旅游网

序言

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

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>

因篇幅问题不能全部显示，请点此查看更多更全内容

查看全文