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: "数据"
    };
  }
};
</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>

3.调用子组件中的方法

//子组件
<template>
  <div>
    我是子组件{{count}}
    <button @click='add'>+1</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      count: 1,
    }
  },
  methods: {
    add () {
      this.count += 1
    }
  }
};
</script>

//父组件
<template>
  <div>
    <button @click="pdd">按钮</button>
    <Son ref="son"></Son>
  </div>
</template>

<script>
import Son from "./components/son";
export default {
  methods: {
    pdd () {
      const child = this.$refs.son
      console.log(child);
      child.add()
    }
  },
  components: {
    Son
  }
};
</script>