Vuejs：将 SAVE 函数传递给 CRUD 组件

Question

我正在努力寻找一个合适的解决方案，它需要在 vuejs 中进行高级父子通信。可以有许多不同的父组件，它们具有如何保存数据的逻辑。从另一侧来看，只有一个子组件，它有一个元素列表和一个用于创建新元素的表单，但它不知道如何保存数据。

问题是：是否有任何其他方法（更好的方法）具有相同的功能但要摆脱 this.$refs.child 链接。例如，我想知道是否可以将函数（SaveParent1(...) 或 SaveParent2(...)）传递给子组件。但问题是该函数包含一些父变量，这些变量在子上下文中不可用，并且这些变量可以在运行时更改。

简单说明一下：

现实生活中的方法SaveParent1和SaveParent2return 承诺（axios）。
child-component就像一个增删改查其他地方。

目前通信看起来像这样：CHILD -event-> PARENT -ref-> CHILD.

下面是例子：

<div id="app">
  <h2>&#128512;Advanced Parent-Child Communication:</h2>
  <parent-component1 param1="ABC"></parent-component1>
  <parent-component2 param2="XYZ"></parent-component2>
</div>

Vue.component('parent-component1', {
  props: { param1: { type: String, required: true } },
  methods: {
    onChildSubmit(p) {
        // Here will be some logic to save the param. Many different parents might have different logic and all of them use the same child component. So child-component contains list, form and validation message but does not know how to save the param to the database.
      var error = SaveParent1({ form: { p: p, param1: this.param1 } });
      if (error)
        this.$refs.child.paramFailed(error);
      else
        this.$refs.child.paramAdded(p);
    }
  },
  template: `<div class="parent"><p>Here is parent ONE:</p><child-component ref="child" @submit="onChildSubmit"></child-component></div>`
});

Vue.component('parent-component2', {
  props: { param2: { type: String, required: true } },
  methods: {
    onChildSubmit(p) {
        // Here is a different logic to save the param. In prictice it is gonna be different requests to the server.
      var error = SaveParent2({ form: { p: p, param2: this.param2 } });
      if (error)
        this.$refs.child.paramFailed(error);
      else
        this.$refs.child.paramAdded(p);
    }
  },
  template: `<div class="parent"><p>Here is parent TWO:</p><child-component ref="child" @submit="onChildSubmit"></child-component></div>`
});

Vue.component('child-component', {
  data() {
    return {
      currentParam: "",
      allParams: [],
      errorMessage: ""
    }
  },
  methods: {
    submit() {
        this.errorMessage = "";
        this.$emit('submit', this.currentParam);
    },
    paramAdded(p) {
        this.currentParam = "";
        this.allParams.push(p);
    },
    paramFailed(msg) {
        this.errorMessage = msg;
    }
  },
  template: `<div><ol><li v-for="p in allParams">{{p}}</li></ol><label>Add Param: <input v-model="currentParam"></label><button @click="submit" :disabled="!currentParam">Submit</button><p class="error">{{errorMessage}}</p></div>`
});

function SaveParent1(data) {
  // Axios API to save data. Bellow is a simulation.
  if (Math.random() > 0.5)
    return null;
  else
    return 'Parent1: You are not lucky today';
}

function SaveParent2(data) {
  // Axios API to save data. Bellow is a simulation.
  if (Math.random() > 0.5)
    return null;
  else
    return 'Parent2: You are not lucky today';
}

new Vue({
  el: "#app"
});

还有一个现场演示可用：https://jsfiddle.net/FairKing/novdmcxp/

Answer 1

在架构上，我建议拥有一个完全从组件层次结构中抽象出来的服务，您可以在每个组件中注入和使用该服务。使用这种组件层次结构和架构，很容易运行陷入这些问题。从组件中抽象尽可能多的功能和业务逻辑很重要。我认为这些现代框架中的组件只是 HTML 类固醇的模板，它们至多应该充当控制器，让它们尽可能地笨和薄，这样你就不会运行情况。我不知道vue.js所以我不能给你技术解决方案但希望这个指示对你有所帮助

Answer 2

我想我找到了解决办法。所以没有两种方式的沟通。我可以只传递一个方法，child 将在不与 parent 通信的情况下完成所有操作。我很高兴将其标记为答案。谢谢大家的帮助。

请让我知道你们的想法。

下面是我的解决方案：

<div id="app">
  <h2>&#128512;Advanced Parent-Child Communication:</h2>
  <parent-component1 param1="ABC"></parent-component1>
  <parent-component2 param2="XYZ"></parent-component2>
</div>

Vue.component('parent-component1', {
    props: { param1: { type: String, required: true } },
  computed: {
    saveFunc() {
        return function(p) { SaveParent1({ form: { p: p, param1: this.param1 } }); }.bind(this);
    }
  },
  template: `<div class="parent"><p>Here is parent ONE:</p><child-component :saveFunc="saveFunc"></child-component></div>`
});

Vue.component('parent-component2', {
    props: { param2: { type: String, required: true } },
  computed: {
    saveFunc() {
        return function(p) { SaveParent2({ form: { p: p, param2: this.param2 } }); }.bind(this);
    }
  },
  template: `<div class="parent"><p>Here is parent TWO:</p><child-component :saveFunc="saveFunc"></child-component></div>`
});

Vue.component('child-component', {
    props: { 
    saveFunc: { type: Function, required: true }, // This is gonna be a Promise in real life.
  },
  data() {
    return {
      currentParam: "",
      allParams: [],
      errorMessage: ""
    }
  },
  methods: {
    submit() {
        this.errorMessage = "";
      var error = this.saveFunc(this.currentParam);
      if (error)
        this.paramFailed(error);
      else
        this.paramAdded(this.currentParam);
    },
    paramAdded(p) {
        this.currentParam = "";
        this.allParams.push(p);
    },
    paramFailed(msg) {
        this.errorMessage = msg;
    }
  },
  template: `<div><ol><li v-for="p in allParams">{{p}}</li></ol><label>Add Param: <input v-model="currentParam"></label><button @click="submit" :disabled="!currentParam">Submit</button><p class="error">{{errorMessage}}</p></div>`
});

function SaveParent1(data) {
    console.log(data);
    // Axios API to save data
    if (Math.random() > 0.5)
    return null;
  else
    return 'Parent1: You are not lucky today';
}

function SaveParent2(data) {
    console.log(data);
    // Axios API to save data
    if (Math.random() > 0.5)
    return null;
  else
    return 'Parent2: You are not lucky today';
}

new Vue({
  el: "#app"
});

演示 link：https://jsfiddle.net/FairKing/novdmcxp/126/

Vuejs：将 SAVE 函数传递给 CRUD 组件

Vuejs: Passing SAVE function into CRUD component

javascript

crud

parent-child

vue.js