父組件調用子組件中的方法

父組件：

<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>

樣式展示

調用以前：

調用以后：