0

我正在将我的 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>'
    }
  }
})

问候，特奥多尔

4

1 回答 1

0

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

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

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

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

于 2018-10-15T13:02:31.613 回答