日期: 2020 年 12 月 19 日

发布于

vuejs 子组件调用父组方法的定义

很多时候，我们的子组件作用有所不同，因此我们需要用相同的数据结构，而使用父组件中的方法来进行执行。

它们之间的关系不是很复杂，我们需要进行以下设置，就可以做到了

1.首先，在引用子组件时定义 v-on 属性，假如我们的子组件名称为 am-operation，而父组件也就是当前组件中要给到子组件的方法为parentMethod，那么代码如下

<am-operation v-on:callback="parentMethod"></am-operation>

注意：parentMethod正是父组件中的方法。

2.然后，我们在子组件的模板部分需要调用的地方添加如下代码

<am-button type="success" lagel="提交" @click="childrenMethod( attr1,attr2 )"></am-button>

注意：此处 childrenMethod 为子组件中的方法。

3.最后，我们需要在子组件的 methods 中添加对应的 childrenMethod方法如下

Vue.component('am-menu-operation', {
    // ......
    methods:{
        childrenMethod( attr1,attr2 ){
          this.$emit( 'callback',attr1,attr2 );  
        }
    }
}

注意：重点就在 this.$emit,而callback 正是 v-on：后定义的方法名称