在 React 或 Vuejs 中处理清除视图组件答案

【问题标题】：Handling clearing a view component in React Or Vuejs在 React 或 Vuejs 中处理清除视图组件
【发布时间】：2017-01-23 01:01:54
【问题描述】：

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

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

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

现在一切正常，因为子组件使用数据调用该方法，但现在我有 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>`
  };

【问题讨论】：

标签： javascript reactjs vue.js vue-component

【解决方案1】：

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

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

【讨论】：

所以你是说将状态变量作为道具传递给孩子并给它2路绑定？
我不确定这在技术上是否是 2 路绑定，但是对于像这样的简单情况，这是一种非常常见的模式。对于更复杂的情况，将状态存储在 Flux 或 redux 状态对象中并让子组件触发事件来更改它是有意义的。
嗯，是的，当然，你有这个反应。但在 vue 中它以 2 方式绑定同步。
哦，对不起！也许 Vue 中有更清洁的解决方案
如果我在该容器中有更多组件，例如：添加评论、添加喜欢、添加新帖子......所以在你的想法中，我需要跟踪那个大容器中的所有数据，并且将其传递给所有子组件...

【解决方案2】：

文档中有一个关于Parent-child component communication 的部分。

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

家长：

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

孩子：

events: {
  'clear-data': function() {
    this.data = ''
  }
}

【讨论】：