Vue中調用另一個組件中自定義事件

之前在一個場景中，遇到組件需要調用父組件中的方法tableInit()，字組件調用父組件常用的有三種方法，具體參考：https://www.cnblogs.com/jin-zhe/p/9523782.html

后來我使用的是自定義組件的方式，也算是一個小的知識點吧，在這里記錄一下

首先，在需要使用的組件里面先聲明這個組件：

import whitecityedit from "./components/whitecityedit";
import showdialog from "./components/showdialog";
export default {
  components: {
    whitecityedit,
    showdialog
  },

在組件中去調用：

<whitecityedit ref="whitecityedit" v-on:whitecityedit="tableInit"></whitecityedit>
 <showdialog ref="showdialog"></showdialog>

v-on:whitecityedit="tableInit"，這個是自定義事件，表示要調用的哪個方法

//編輯
    btnEdit: function(id) {
      this.$refs["whitecityedit"].openDialog(id);
    },

這個是彈出組件。openDialog是對應組件中的一個方法。

 methods: {
    openDialog: function(id) {
      let that = this;
      that.dialogShow = true;
      that.formData.PWCDataFlag = 1;
      that.formData.PWCCountryName = "";
      that.formData.PWCCountryId = "";
      that.formData.PWCId = 0;
      that.formData.PWCCountryPinYin = "";
      that.changeAble = false;
      if (typeof id == "undefined") {
        return false;
      }
      that.loadData(id);
    },

然后，在組件中：

callMethod: function() {
      this.$emit("whitecityedit");//可以有第二個參數，是傳的參數
    }

whitecityedit  這個對應的是  自定義事件的那個事件 的名字。

這樣就可以調用自定義的事件了