1 App.vue – 父组件

<template>
  <div id="app">
    <v-lead :hmsg='msg' :hrun='run' :father='this' ref='leader'></v-lead>
    <br><hr>
    <button @click="testson">testson</button>
  </div>
</template>

<script>
import Lead from './components/Lead.vue';
export default {
  name: "app",
  data() {
    return {
      msg:'father'
    }
  },
  components:{
    'v-lead':Lead
  },
  methods:{
    run(data){
      alert(data);
    },
    testson(){
      alert(this.$refs.leader.msg);

    }
  }
};
</script>

2 Lead.vue – 子组件

<template>
    <div id='test'>
        <h2 class='tt'>
            {{msg}}--<br>--{{hmsg}}
        </h2>
        <br><hr>
        <button @click='hrun("haha")'>hruntest</button>
        <br><hr>
        <button @click='testfather()'>testfather</button>
        <br><hr>
        <button @click='getfatherdata()'>getfatherdata</button>
    </div>
</template>

<script>
export default {
    data(){
        return {
            'msg':'I am a msg from Lead component'
        }
    },
    methods:{
        testfather(){
            this.father.run("test");
        },
        getfatherdata(){
            alert(this.$parent.msg);
            this.$parent.run('son');
        }
    },
    props:['hmsg','hrun','father']
    //props:{'hmsg':String} 验证数据类型

}
</script>

<style scoped>
.tt{
    font-size: 50px;
    color: red;
    background-color:blue;
}
</style>