1.import导入另一个组件

import Res from './views/res.vue'

2.components挂载

  components: {
    Res
  },

3.占位符使用 ref给定一个名称

 <Res ref="comLeft"></Res>

4.通过 this.$refs.comLeft可以获取到另一个组件的值或者方法什么的。

第一个组件App.vue

<template>
  <div>
    <h5>测试refs</h5>
    <Res ref="comLeft"></Res>
    <button @click="conRes">重置子组件res上的count</button>
  </div>
</template>
<script>
import Res from './views/res.vue'
export default {
  data() {
    return {
    };
  },
  components: {
    Res
  },
  methods: {
    conRes(){
      // console.log(this.$refs.comLeft.count);
      console.log(this.$refs);
      //  this.$refs.comLeft.count = 0;
      this.$refs.comLeft.resture()
    }
  },
};
</script>
​
​

第二个组件res.vue

<template>
  <div>
     <h5> {{count}}</h5>
    <button @click="add">+1</button>
    <button @click="resture">重置</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
​
  methods: {
    add() {
      this.count++;
    },
    resture() {
      this.count = 0;
    },
  },
};
</script>
<style>
</style>
​