Vue-父/子组件互调方法

父组件ProductCategory.vue

使用组件product-show

<product-show ref="product_show_child" :id="id" v-show="visibleTag" :parentMethod="showMe" ></product-show> 

<template>
  <div class="app-container">
    产品分类
    <label>id:</label><el-input v-model="id"></el-input>
    <el-button type="primary" @click="toggleProduct">显示/隐藏组件</el-button>
    <el-button type="primary" @click="triggerChildMethod">调用子组件方法</el-button>
    <product-show ref="product_show_child" :id="id" v-show="visibleTag" :parentMethod="showMe" ></product-show>
 </div>
</template>

<script>
import ProductShow from './ProductShow'
export default {
  components: { ProductShow },
  data(){
    return {
          id:'00013',
          visibleTag:false
    }
  },
  methods:{
      toggleProduct(){
        this.id='00012';
        this.visibleTag=!this.visibleTag;
      },
      showMe(){
        this.$message({message:'T shirt-ShowFrom-ProductCategory.Vue'});
      },
      triggerChildMethod(){
        this.$refs.product_show_child.showMe();//调用子组件方法
      }
  }
}
</script>

子组件ProductShow.vue

<template>
    <div>
        <h1 >我接收到的Id是：{{id}}</h1>
        <div>
            调用父组件方法：<el-button @click="triggerParentMethod" type="primary">调用父组件方法</el-button>
        </div>
    </div>
</template>
<script>
export default {
    name:'ProductShow',
    props:{
        id:{
            type:String,
            required:true
        },
        parentMethod:{//传入父组件方法指针
             type:Function,
             required:false
        }
    },
    data(){
        return {

        }
    },
    methods:{
        showMe(){
            this.$message({message:'ShowFrom-ProductShow.Vue'});        
        },
        triggerParentMethod(){ 
            if(this.parentMethod){
                this.parentMethod();//调用父组件方法
            }
        }
    }
}
</script>
<style scoped>
div{
    margin: 20px;
}
</style>

运行效果：