Question

我知道，Vuejs＆gt; = 2.0中组件之间的通信是由三个概念完成的

道具 - 外部上下文如何将数据传递给组件
事件 - 是组件如何知道有关更改的外部上下文，
广告位 - 这个对我的问题并不重要。

我也知道中央状态模式及其周围的所有东西。但有时通常能够告诉孩子组件＆＃34;做某事，改变你的内部状态＆＃34;。

以下是一些情景：

TreeView（递归组件）和＆＃34;全部崩溃＆＃34;按钮 - 您需要告诉所有子组件崩溃。我知道，这里是适用的中央状态模式，但让我们想象节点的状态（扩展/折叠）是组件内部状态的一部分。
计数器 - 我可以在页面上有多个计数器，父组件有按钮＆＃34;增加全部＆＃34; - 再次，我需要＆＃34;打电话＆＃34;每个子组件的递增方法。

问题是：如何实现＆＃34;基于事件＆＃34;父母中组件之间的通信 - ＆gt;孩子的方向。我觉得这是一种常见的情况。

我做了一个例子jsbin。但是，我不确定它是否违反了vue js的一些基本思想。

https://jsbin.com/kakucuf/edit?html,js,output

const Foo = {
  name: 'Foo',
  template: '#a-template',
  props: {
    name: {
      required: true,
      type: String
    },
  },
  data() {
    return {
      counter: 0
    }
  },
  mounted() {
    this.$on('increment', this.increment);
  },

  methods: {
    increment() {
      this.counter += 1;
    }
  }
}

new Vue({
    el: "#app",
  components: {
    foo: Foo,
  },
  methods: {
    incrementAll() {
      this.$children.forEach((child) => child.$emit('increment'));
    }
  }
});

Answer 1

也许computed properties and watchers可以帮到你。

在父组件中，您可以将计算属性用作子组件的道具。一旦计算属性发生变化，您的子组件就会因Vue.js反应功能而更新。

并且，在您的子组件中，使用观察者来控制此组件上下文中的更改。

从您的方案开始：

您可以在父组件上使用collapse道具，＆＃34;听＆＃34; （或实际上＆＃34;观察＆＃34;）通过子组件中的观察器更改其值，如果新值为true <，则观察器功能将执行每个子组件内的折叠工作/ LI>
您可以从您的父组件发送increment道具，并通过子组件中的观察者观察其值的变化

例如，对于第二种情况，请使用父组件中的increment道具，并在子组件中观察它：

watch: {
    increment: function (newVal) {
        if (newVal === true) {
            this.counter++
        }
    }
}

在您的父组件中，将this.increment设置为true会触发子组件中的观察者。如果您需要增加更多内容，请注意，在重新分配null之前，您必须将其重新设置为true之类的其他值。

那是一种黑客攻击，应该代表你开始考虑像Vuex这样的状态管理解决方案的时候！

vuejs中组件之间的通信

1 个答案: