Javascript 如何在Vue.js中的两个组件之间共享方法？

我有一个Ag网格，它有特定的操作按钮和从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>

<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>

从“ag grid vue”导入{AgGridVue}；
从“vuex”导入{mapGetters}；
从“@/components/GridEditButton”导入GridEditButton；
从“@/components/MasterModal”导入MasterModal；
导出默认值{
名称：“主数据”，
数据（）{
返回{
addBtnClick:false，
德尔布特尼克：错，
编辑：错，
选定：“业务领域”，
下拉表格：[
“商业区”，
“委员会”，
"分区",，
“类型”，
“工作流程阶段”
],
网格选项：{
domLayout:“自动高度”，
enableColumnResize:true，
rowDragManaged：是的，
动画师：没错，
背景：{
vm:null
}
}
};
},
组成部分：{
“ty主模态”：主模态，
“ag grid vue”：AgGridVue，
gridEditButtons
},
方法：{
//基于下拉选择过滤网格内容
RefreshGrid:函数（）{
让cName；
如果（this.selected==='Business Area'）{
cName=‘业务区’；
}else if（this.selected===='Council'）{
cName=‘委员会’；
}else if（this.selected==='Type'）{
cName=‘打字机’；
}else if（this.selected===“工作流阶段”）{
cName='workflowstage'；
}
设obj={
vm：这个，
收藏名称：cName，
操作：“masterData/setMasterData”，
突变：“setMasterData”
};
这是$store.dispatch（obj.action，obj）；
}
};

Modal.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>

<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>

从“vuex”导入{mapGetters}；
导出默认值{
名称：“MasterModal”，
道具：{
只读：布尔，
entryData:对象，
addBtnClick:Boolean，
delBtnClick:Boolean，
editVisible:布尔，
selectedTable:字符串
},
数据（）{
返回{
fieldAlert:错误，
isReadOnly:错误，
对话：错，
dialogDelete:false，
有效：假，
可见：假，
禁用：false
};
},
计算：{
…映射器（“主数据”{
entryState:“entryState”，
//entryData:“entryData”，
列：“列”，
selectedRowId:“selectedRowId”
})
},
观察：{
addBtnClick:函数（newValue、oldValue）{
this.setDialog（！this.dialog）；
},
editVisible:函数（newValue、oldValue）{
this.setVisible（！this.visible）；
},
delBtnClick:函数（newValue、oldValue）{
this.setDialogDelete（！this.dialogDelete）；
}
},
方法：{
setDialog（bValue）{
this.dialog=b值；
},
setDialogDelete（bValue）{
this.dialogDelete=b值；
},
}
};

有几种方法可以实现这一点

一种是使用emit

在MasterModal.vue组件中，在父MasterData.vue组件中运行此.emit（'refreshGrid'）

如果你有直接的亲子关系，这可能是最好的选择

另一种方法是将函数作为道具传递给子组件

并在MasterModal.vue中添加一个prop

onRefreshGrid

，然后可以调用该函数

使用vuex的另一种方法是向MasterData.Vue添加监视，并监视vuex存储中的变量，即

actionInvoker

。当

actionInvoker

更改时，将执行该操作。若要更改值，请将其设置为0并递增或在两者之间切换，或设置为随机值。优点是您可以从任何位置调用该值

---

这个（和以前的）问题解决方案是将功能绑定到不应该存在的视图/组件。我建议使用第三种解决方案，将功能推送到vuex操作中，然后您可以从任何位置调用它。这需要将

选定的
变量也存储在vuex中，如果您希望有多个insta对于模态组件和主组件，单一存储将禁止这种情况（除非您添加对多个实例的支持）。
有几种方法可以实现这一点

一种是使用emit

在MasterModal.vue组件中，在父MasterData.vue组件中运行此.emit（'refreshGrid'）

如果你有直接的亲子关系，这可能是最好的选择

另一种方法是将函数作为道具传递给子组件


并在MasterModal.vue中添加一个prop
onRefreshGrid
，然后可以调用该函数

使用vuex的另一种方法是向MasterData.Vue添加监视，并监视vuex存储中的变量，即
actionInvoker
。当
actionInvoker
更改时，将执行该操作。若要更改值，请将其设置为0并递增或在两者之间切换，或设置为随机值。优点是您可以从任何位置调用该值

这个（和以前的）问题解决方案是将功能绑定到不应该存在的视图/组件。我建议使用第三种解决方案，将功能推送到vuex操作中，然后您可以从任何位置调用它。这需要将
选定的
变量也存储在vuex中，如果您希望有多个insta对于模态组件和主组件，单一存储将禁止这种情况（除非您添加对多个实例的支持）。
您已经在使用vuex，所以