javascript - 在 React 或 Vuejs 中处理清除 View 组件

Question

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

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

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

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

• 数据不错，组件输入清晰
• 数据错误，显示错误

第二个选项很简单...

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

** 此代码是我在 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>`
  };

Answer 1

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

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