如何在Vue.js的兩個組件之間共享方法？

Question

我有一個Ag-Grid，其中包含某些操作按鈕和從MongoDB數據庫填充的動態數據。 我的MasterData.Vue文件上有一個刷新網格的方法。 網格記錄中的每個操作按鈕都將執行更新/刪除操作。 當我單擊這些按鈕時，我在另一個Modal.Vue文件中設計了一個自定義的彈出模態組件。 我想在Modal.Vue中調用該RefreshGrid（）方法。 我嘗試使用道具共享數據，但是方法上不起作用。

MasterData.Vue腳本

<script>
import { AgGridVue } from 'ag-grid-vue';
import { mapGetters } from 'vuex';
import gridEditButtons from '@/components/GridEditButton';
import MasterModal from '@/components/MasterModal';
export default {
  name: 'masterData',
  data () {
    return {
      addBtnClick: false,
      delBtnClick: false,
      editVisible: false,
      selected: 'Business Area',
      dropdown_tables: [
        'Business Area',
        'Council',
        'Sub Area',
        'Type',
        'Work Flow Stage'
      ],
      gridOptions: {
        domLayout: 'autoHeight',
        enableColumnResize: true,
        rowDragManaged: true,
        animateRows: true,
        context: {
          vm: null
        }
      }
    };
  },
  components: {
    'ty-master-modal': MasterModal,
    'ag-grid-vue': AgGridVue,
    gridEditButtons
  },
  methods: {
  // Filter Grid Contents based on Dropdown selection
    RefreshGrid: function () {
      let cName;
      if (this.selected === 'Business Area') {
        cName = 'businessarea';
      } else if (this.selected === 'Council') {
      cName = 'council';
      } else if (this.selected === 'Type') {
        cName = 'typemaster';
      } else if (this.selected === 'Work Flow Stage') {
        cName = 'workflowstage';
      }
      let obj = {
        vm: this,
        collectionName: cName,
        action: 'masterData/setMasterData',
        mutation: 'setMasterData'
      };
      this.$store.dispatch(obj.action, obj);
    }
};
</script>

Modal.Vue腳本

<script>
import {mapGetters} from 'vuex';

export default {
  name: 'MasterModal',
  props: {
    readOnly: Boolean,
    entryData: Object,
    addBtnClick: Boolean,
    delBtnClick: Boolean,
    editVisible: Boolean,
    selectedTable: String
  },
  data () {
    return {
      fieldAlert: false,
      isReadOnly: false,
      dialog: false,
      dialogDelete: false,
      valid: false,
      visible: false,
      disable: false
    };
  },
  computed: {
    ...mapGetters('masterData', {
      entryState: 'entryState',
      // entryData: 'entryData',
      columns: 'columns',
      selectedRowId: 'selectedRowId'
    })
  },
  watch: {
    addBtnClick: function (newValue, oldValue) {
      this.setDialog(!this.dialog);
    },
    editVisible: function (newValue, oldValue) {
      this.setVisible(!this.visible);
    },
    delBtnClick: function (newValue, oldValue) {
      this.setDialogDelete(!this.dialogDelete);
    }
  },
  methods: {
    setDialog (bValue) {
      this.dialog = bValue;
    },
    setDialogDelete (bValue) {
      this.dialogDelete = bValue;
    },
 }
};
</script>

Answer 1

有兩種方法可以實現這一目標。

一種是使用發射

在MasterModal.vue部件運行this.$emit('refreshGrid')在父MasterData.Vue部件使用<ty-master-modal @refreshGrid="RefreshGrid" ...>

如果您有直接的親子關系，這可能是最好的選擇

另一種方法是將功能作為道具傳遞給子組件。

<ty-master-modal :onRefreshGrid="RefreshGrid" ...>

和道具添加onRefreshGrid到MasterModal.vue，那么你可以調用函數。

使用vuex的另一種方法是將監視添加到MasterData.Vue，並監視vuex存儲中的變量。 actionInvoker 。 當actionInvoker更改時，將執行操作。 要更改該值，請將其設置為0並在其之間遞增或切換，或設置為隨機值。 好處是您可以在任何地方調用它。

這個（以及以前的）解決方案的問題在於，您具有不應存在於視圖/組件上的功能。 我建議使用第三個解決方案，將功能推入vuex動作，然后您可以從任何地方調用它。 盡管這也需要將selected變量也存儲在vuex中，並且如果要具有Modal和Master組件的多個實例，則單數存儲將禁止這樣做（除非您添加對多個實例的支持）。