父组件调用子组件中的方法

父组件：

<template>
    <div>
        <child-2 ref="child2"></child-2>
        <Button type="primary" @click="chua">调方法</Button>
    </div>
</template>
<script>
import child2 from '../../components/demo3/child2.vue'
export default {
  components: { child2 },
  name: 'demo4',
  data () {
      return {

      }
  },
  methods: {
      chua () {
          console.log(this.$refs)
          debugger
          this.$refs.child2.chuachua()
      }
  }
}
</script>

子组件：

<template>
    <div @click="chuachua">子组件</div>
</template>
<script>
export default {
    name:'child2',
    props: ['chua'],
    methods: {
        chuachua () {
            alert('123')
        }
    }
}
</script>

样式展示

调用以前：父组件调用子组件中的方法

调用以后：父组件调用子组件中的方法