1

我有一个处理所有业务逻辑、ajax、数据等的容器组件。

它有子组件，他将数据和方法作为道具传递。

所以对于这个问题，有一个“CommentForm”组件，它获取一个道具作为提交时调用的函数。

现在一切正常，因为子组件使用数据调用该方法，但现在我有 2 个选项：

  • 数据很好，所以清除组件的输入
  • 数据不好，显示错误

第二种选择很简单...

但第一个，我如何告诉子组件清除它的内容，我需要为它创建另一个道具，还是另一种好方法？

** 此代码是我在 Vue.js 中的代码示例，但这是一般问题，例如 react

let Vue = require('vue');


ParentComponent = Vue.extend({

    template: `<div>
                <CommentForm submitted="myFucntion"></CommentForm>
              </div>`,
    methods: {
      myFucntion: function(text) {
        //whatever
        //but on sucess I want to clear the child component
      }
    }
  };
                         
let Vue = require('vue');


CommentForm = Vue.extend({
    props: {
        submitted: {
            type: Function,
            required: true
        }
    },
    data: function () {
        return {
            text: ''
        }
    },
    template: `<div>
                <input type="text" v-model="text" />
                <button @click="submitted(text)" />
              </div>`
  };

4

2 回答 2

1

我在这里回答更多的反应，但同样的逻辑应该适用于 Vue。您可能希望 Parent 组件拥有子输入的值，方法是保持 Parent 状态或将其存储在 Flux/redux 类型的实现中。你在 React 中要做的就是让 Parent 传递value给孩子，以及一个onChange回调。当子组件检测到更改时，它会触发传入的onChange，并且父组件会更新其自己的内部状态，或者如果您正在使用类似通量的实现，则会触发通量操作。这样，成功提交后，父母可以清除道具并将其传递给孩子。

执行此操作的任何其他方法最终可能会变得草率，因为您需要在父母和孩子之间复制状态，或者让父母以某种方式进入并调用孩子的内部函数，这非常hacky。希望有帮助！

于 2016-09-15T06:14:00.113 回答
1

该文档有一个关于父子组件通信的部分。

您可以使用 引用父组件的子组件this.$children，但不建议这样做。或者，您可以从父级发送一个自定义事件，this.$broadcast并在子级中为该事件设置一个处理程序。

家长：

methods: {
  // ...
  clearData: function() {
    this.$broadcast('clear-data')
  }
}

孩子：

events: {
  'clear-data': function() {
    this.data = ''
  }
}
于 2016-09-15T16:29:12.363 回答