vue.js - 从另一个组件调用组件方法答案

【问题标题】：vue.js - call component method from another componentvue.js - 从另一个组件调用组件方法
【发布时间】：2020-04-05 13:27:10
【问题描述】：

我想在添加数据后使用组件 2 的 getProjects() 方法来刷新我的表。这两个组件都附加在一个blade.php中

组件1.vue

 methods: {
  addData() {
    this.attemptSubmit = true;
    this.validate = true;
    this.errors = [];
    if (this.errors) event.preventDefault();
    axios
    .post('/api/department', {
                department: this.department,
                section: this.section
    })
    .then(response => {
      this.validate = false;
      this.department = '';
      this.section = '';
      this.errors = '';
      this.output = response.data;
      //--- I want to insert the getProjects() method here 
    })
    .catch(error => this.errors = error.response.data.errors)
  },

组件2.vue

methods: {
    getProjects(url = '/api/departments') {
      this.tableData.draw++;
      axios
      .get(url, {params: this.tableData})
      .then(response => {
        let data = response.data;
        if (this.tableData.draw == data.draw) {
          this.projects = data.data.data;
          this.configPagination(data.data);
        }
      })
      .catch(errors => {
        console.log(errors);
      });
    },

【问题讨论】：

为get项目创建单独的服务很好，你可以从两个组件中调用它。
你的意思是我应该把它分成另一个组件吗？我会有很多不同的表单，每个表单都有自己的数据表组件。
你看起来需要mixin
我检查了 mixin。在我看来，我需要为不同的表单创建不同的 mixin，因为每个表单都有不同的 axio.get URL。
您可以将该 url 作为参数传递 ....

标签： javascript laravel vue.js

【解决方案1】：

你应该使用 vuex。见https://medium.com/js-dojo/vuex-2638ba4b1d76

您从组件调用 vuex 操作，在此操作中，您可以直接调用 axios 或使用其他服务进行 api 调用。

绝不能仅从商店内的操作中从组件调用突变。

亲切的问候

【讨论】：

我会尝试研究这个，因为我是 vue.js 的新手，非常感谢！
如果您需要更多信息或帮助，请随时询问。

【解决方案2】：

是的，这是可能的。第 3 步将执行您明确要求的操作，但还有更好的方法。

三种方式。

1) VUEX： 将您希望调用的方法移动到 Vuex 以及任何相关的反应式数据属性到 store。并使用 getter 检索更新的数据。

2) MIXINS：使用 mixin，您可以将您的 component2.vue 和相关数据属性移动到一个 mixin，并将其导入到两个组件中，从而允许从每个组件中调用它。

3) Hacky fix，实际上从另一个组件调用方法（不是最佳实践）

您可以通过发出事件将方法挂载到 $root 并从另一个组件调用它们。使用您的示例，它将如下所示。

Components2.vue // 挂载你要调用的方法


// new code
  mounted() {

    this.$root.$on("getProjects", () => {

      return this.getProjects(url = '/api/departments');
    });
  }

Component1.vue // 调用挂载的方法

 methods: {
   // new code
    emitGetProjects() {
     this.$root.$emit("getProjects") //like this
    }
  },

更多信息在这里How can I call method in other component on vue.js 2?，以防我打错字

【讨论】：