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

一开始感觉调用方法应该和react差不多，父组件传入子组件，子组件调用就行了。但感觉应该还有其他方法，于是将这些方法记录下。

1、父组件中把方法作为属性传入子组件，在子组件里直接调用这个方法

父组件中引用子组件:

 <bill-table
        :billDetail="billDetail"
        :setBillDetail="setBillDetail"
  ></bill-table>

子组件中写法：

 <span @click="setBillDetail(null)"><i class="el-icon-arrow-left"></i>返回</span>
export default {
 props: {
    setBillDetail: {
      type: Function,
      default: null,
    },
  },
}

一定要在props里声明setBillDetail函数，不然setBillDetail始终为undefined!!!
初学vue，自己就踩了个大坑，忘记在props里加了。

2、子组件里用$emit向父组件触发一个事件

父组件:

 <bill-table
        v-if="billDetail"
        :billDetail="billDetail"
        @setBillDetail="setBillDetail"
      ></bill-table>

子组件:

 <span @click="$emit('setBillDetail', null)"><i class="el-icon-arrow-left"></i>返回</span>

这样写，编译会通过，但eslint会给出error：

error

查了下[官网 event-names] 事件的命名规范。由于下面2点原因，更推荐kebab-case（短横线）命名方式。

event-names

于是将父子组件内容分别修改如下：
父组件(Props同样适用)：

  <bill-table
        v-if="billDetail"
        :bill-detail="billDetail"
        @set-bill-detail="setBillDetail"
      ></bill-table>

子组件：

<span @click="$emit('set-bill-detail', null)"><i class="el-icon-arrow-left"></i>返回</span>

总之，记住一句话：HTML 中的 attribute 名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符，更推荐 kebab-case 。

3、直接在子组件中通过this.$parent.event来调用父组件的方法

此处举例省略。

参考：
[Vue子组件调用父组件的方法]