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

Posted 2023-02-23

【中文标题】Vue 组件之间的 Bootstrap Vue 按钮信号

【英文标题】：Bootstrap Vue button signals between Vue components

【发布时间】：2018-12-29 13:47:12

【问题描述】：

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

问候， 特奥多尔

【问题讨论】：

能否提供代码示例？您可以使用这个作为基础。 jsfiddle.net/chrisvfritz/50wL7mdz

@Max Martynov 简化小提琴中的整个事情实际上按预期工作，所以我回去发现我的代码中有一个错误。似乎不需要什么特别的东西就可以让它工作？？？？我将我的代码附加到草稿中。非常感谢您的帮助。

那么为什么不把你的“更新”作为你自己的答案。即使您实际上不需要做任何与您的问题不同的事情，简化也会使事情变得更好，更简单。因此，值得将该部分复制到“回答您自己的问题”中。

【参考方案1】：

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

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

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

为了让两个兄弟组件进行通信，将 v-model 的相同逻辑应用到 'sibling-b' 中的 b-collapse 组件