Question

我正在努力实施我认为非常容易的事情。

在我的Vue应用程序中，我循环浏览列表。每个列表项都是子组件。每个列表项都有一个展开/折叠按钮。这工作正常，但我希望能够关闭父母的所有打开的项目，我似乎无法按照我的意愿来完成工作。

展开/折叠是通过名为isOpen的变量控制的，所以

<div v-if="isOpen">Something here</div>

我尝试使用计算属性而不是isOpen并传递道具，但问题是我认为它需要更像是一个事件。

考虑三个开放列表项。如果列表项由道具控制，并将其设置为false关闭项目，则在重新打开项目时，道具仍然是false因此不会再次工作。我知道我可以在父母身上改回来，但这似乎不对。

最好的方法是什么？

Answer 1

如果您传递了“allClosed”道具，则需要让您的子组件发出事件以在每次打开时重置它。这对我来说似乎很烦人。我认为你应该更多的是父母对孩子的事件，这需要一个事件总线。

new Vue({
  el: '#app',
  data: {
    closeBus: new Vue(),
    kids: [1, 2, 3]
  },
  components: {
    expandableThing: {
      data() {
        return {
          isOpen: true
        }
      },
      props: ['bus'],
      methods: {
        toggle() {
          this.isOpen = !this.isOpen;
        }
      },
      created() {
        this.bus.$on('close', () => this.isOpen = false);
      }
    }
  }
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<div id="app">
  <expandable-thing v-for="kid in kids" inline-template :bus="closeBus">
    <div>
      <div v-show="isOpen">My stuff!</div>
      <button @click="toggle">Toggle</button>
    </div>
  </expandable-thing>
  <button @click="closeBus.$emit('close')">Close all</button>
</div>

将一次性事件发送到子组件

1 个答案: