向子组件发送一次事件

Posted 2023-02-16

【中文标题】向子组件发送一次事件

【英文标题】：Sending one time event to child components

【发布时间】：2017-12-23 08:43:52

【问题描述】：

我正在努力实现一些我认为很容易的东西。

在我的 Vue 应用程序中，我遍历了一个列表。每个列表项都是一个子组件。每个列表项都有一个展开/折叠按钮。这很好用，但我希望能够关闭父级的所有打开项目，但我似乎无法按照我的意愿进行操作。

展开/折叠是通过一个名为isOpen的变量控制的

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

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

考虑三个打开的​​列表项。如果列表项由一个道具控制，并将其设置为false 会关闭项目，当重新打开一个项目时，该道具仍然是false，因此不会第二次起作用。我知道我可以将其更改回父级，但它似乎是错误的。

最好的方法是什么？

【问题讨论】：

为什么不将open 和close 方法添加到设置/取消设置isOpen 标志的内部组件？对于扩展所有，您只需从每个组件中调用 open 方法。

这应该可以通过简单地使用道具来实现，但如果组件没有直接相关，您总是可以使用事件总线。 alligator.io/vuejs/global-event-bus

将event bus 传递给每个孩子。让孩子们响应公共汽车上的close 事件。当父级在总线上发出关闭事件时，所有响应。

【参考方案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>

【讨论】：

干杯罗伊，这看起来很完美