vue父组件调用子组件方法

通过ref调用
子组件

<template>
  <div class="hello">
      子组件
  </div>
</template>
<script>
export default {
  name: 'Compont',
  data(){
      return{}
  },
  methods:{
      sing(){
        console.log("我是子组件方法")
      }
  }
}
</script>

父组件

<template>
  <div>
      <p>父组件</p>
      <button @click="diaoyong"> 调用子组件方法</button>
      <con ref="child"/>
  </div>
</template>

<script>
import con from '../components/componts.vue'
export default {
    name:'login',
    data(){
        return{}
    },
    methods:{
        diaoyong(){
            this.$refs.child.sing();
        } 
    },
    components:{
        con
    }

}
</script>

本文原创借鉴https://www.cnblogs.com/yuzhongyu/p/10825824.html