自定义组件父-子通信不工作

Question

我目前正在学习vue.js，我正在努力解决父组件和子组件之间的通信问题。

我试图构建两个组件(在不同的文件中)，一个“手风琴容器”和“手风琴”。这样做的想法是在页面上使用类似于这样的内容：

<accordion-container>
  <accordion :title="'Accordion n1'">Insert HTML code here</accordion>
  <accordion :title="'2nd Accordion'">Insert HTML code here</accordion>
</accordion-container>

容器代码：

<template @closeAccordions="closeOtherAccordions">
    <div class="accordion-container"><slot></slot></div>
</template>
<script>

export default {
    props:['title'],
    methods:{
        closeOtherAccordions: function(){
            console.log('Emit from child component received')
        },
    },
    data: function() {
        return {
            
    }
  }
};
</script>

手风琴编码：

<template>
    <div class="accordion" v-bind:class="{ open: isOpen }" :data-title="title">
        <div class="title" @click="toggleAccordion">
            <p>{{title}}</p>
        </div>
        <div class="content"><slot></slot></div>
    </div>
</template>
<script>

export default {
  props:['title'],
  methods:{
      toggleAccordion: function(){
          this.isOpen = !this.isOpen
          this.$emit('closeAccordions')
      }
  },
  data: function() {
      return {
          isOpen: false
      }
  },
  
};
</script>

在手风琴上，我试图发出"closeAccordions“(使用toggleAccordion()方法)，然后在父(手风琴容器)上”侦听“发出的消息(使用:closeAccordions="closeOtherAccordions")，然后在父服务器上执行一个方法。

但是当我点击手风琴时，这个方法不会被调用。

我的主意可能吗？(对其他观点开放:)

Answer 1

不会是那样的。父组件不能通过事件、道具或任何其他只能在直接呈现插槽内容的站点上实现的方法直接与其插槽内呈现的任何组件通信(容器组件不控制这一点)。

当您设计一个组件并在模板中放置一个<slot>时，您所要做的就是在模板中指定一个插入点，以便组件的用户可以插入他们自己的内容。

你有四个选择：

1. (Advanced)手工编写呈现函数，并覆盖呈现的时隙v节点，以注入您自己的事件侦听器、道具等。
2. 使用作用域槽公开API，其中您将一些数据或方法传递给组件的用户必须连接的插槽，这样组件才能正确操作。组件的用户必须记住将容器和每个手风琴之间的所有东西正确地连接起来，因此在这种情况下并不理想，但一般来说，当您想让用户决定父级和子级操作的某些功能时，它是有用的。
3. 不使用事件在容器和手风琴之间进行通信，相反，手风琴可以直接调用容器上的方法，从而允许容器提供每个手风琴可以注入和使用的API。

(3)是建议在这种情况下采取的办法。容器和手风琴组件应该在这里紧密耦合。手风琴组件只能(而且应该)直接在容器组件中使用，所以如果它们像这样直接通信的话就可以了。

// Change this
this.$emit('closeAccordions')

// To this
this.$parent.closeOtherAccordions()

对于更复杂的组件，(4)可能更好。