Vue父组件调用子组件方法(组件通讯)

欢迎加我技术交流QQ群 ：811956471

方法一：利用ref

//父组件
<template>
  <div class="home">
    <HelloWorld ref="mychild"></HelloWorld>
    <div @click="clickParent">click me</div>
  </div>
</template>
<script>
  import HelloWorld from '@/components/HelloWorld.vue'
  export default {
    name: 'home',
    components: {
      HelloWorld
    },
    methods: {
      clickParent() {
        this.$refs.mychild.parentHandleclick("嘿嘿嘿");
      }
    }
  }
</script>

//子组件
<template>
  <div class="hello">
    <h1>我是HelloWorld组件</h1>
  </div>
</template>
<script>
  export default {
    name: 'HelloWorld',
    created() {

    },
    methods: {
      parentHandleclick(e) {
        console.log(e)
      }
    }
  }
</script>