更新

Question

我正在将Bootstrap 4网站迁移到Bootstrap Vue。我是Vue.js的新手，在这里遇到了一些困难。我正在尝试使用Bootstrap Vue可折叠组件，其中可折叠元素本身在子Vue组件中，而按钮在同级中，两者都具有相同的父项。现在我找不到信息，让他们进行交流的最佳方法是什么。（将它们放在相同的Vue组件中可以正常工作。）我的问题是一般性的。有什么最佳实践吗？

非常感谢。如果我的问题不够清楚，请发表评论以便我解决。

更新

在Max的帮助下，我设法使其按预期运行（以下代码）。在我的代码中发现一个错误。猜想简化事情总是一个好主意：）

HTML

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/bootstrap-vue/dist/bootstrap-vue.js"></script> 
<div id="app">
  <sibling-a></sibling-a>
  <sibling-b></sibling-b>
</div>

JavaScript

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  components: {
    'sibling-a': {
        template: "<b-btn v-b-toggle.collapse1>Toggle Collapse</b-btn>"
    },
    'sibling-b': {
        template: '<b-collapse id="collapse1" class="mt-2">' +
                  '<b-card>' +
                    '<p class="card-text">Collapse contents Here</p>' +
                      '<b-btn v-b-toggle.collapse1_inner size="sm">Toggle Inner Collapse</b-btn>' +
                      '<b-collapse id=collapse1_inner class="mt-2">' +
                      '<b-card>Hello!</b-card>' +
                    '</b-collapse>' +
                  '</b-card>' +
                '</b-collapse>'
    }
  }
})

关于，特奥多尔

Answer 1

查看文档bs-vue collapse，您可以将逻辑基于“兄弟a”组件中的v模型，并使用

处理事件

 /// on emitter
this.$root.$emit(...)

// on listener
this.$root.$on(...)

让两个同级组件进行通信，将相同的v-model逻辑应用于'sibling-b'中的b-collapse组件

Vue组件之间的Bootstrap Vue按钮信号

更新

1 个答案: