背景

在使用Vue时避免不了子组件要调用父组件中定义的方法，Vue官网给出了API说明，this.$parent可以调用父组件自定义的方法。但是在使用UI组件时可能会出现无法使用this.$parent直接调用父组件方法的问题。

原因

首先看一个示例：

<Tabs value="name1">
    <TabPane label="输入productID绑定" name="name1">                    
        <TextTag  @setText="setTagList"/>                    
    </TabPane>
</Tabs>

上面代码中使用了iview组件TabPane， TextTag是自己写的组件，在TextTag组件中直接使用this.$parent调用它父级组件的方法会报错，提示方法未定义。

报错原因：自己写的组件被包裹在iview的组件中，TextTag直接父级组件是iview 中的TabPane，所以直接在TextTag组件中调用它父级方法是调用不到的。

解决方法

如果在这种情况下还想要调用父组件中的方法，可以使用：

  this.$emit()  //它能调用父组件的方法并传递数据

相关链接：Vue 中$emit 的用法

原文地址：https://segmentfault.com/a/1190000017030948