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

父组件

 

<template>
  <div id="app">
    <button @click="start">点击</button>
    <Pirate ref="pirate" msg="加勒比海盗"/>
  </div>
</template>

<script>
import Pirate from './components/Pirate.vue'

export default {
  name: 'app',
  components: {
    Pirate
  },
  methods:{
    start(){
      this.$refs.pirate.hello();
    }
  }
}
</script>

<style>
</style>

 

子组件

 

<template>
    <h3>
        {{msg}}
    </h3>
</template>

<script>
export default {
  props: {
    msg: {
      type: String
    }
  },
  methods: {
    hello() {
      console.log("子组件方法");
    }
  }
};
</script>

<style>
</style>

 

运行效果