Vue组件之间的引导Vue按钮信号
Vue组件之间的引导Vue按钮信号
提问于 2018-07-21 20:48:10
我正在将我的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>'
}
}
})你好，特奥多
Stack Overflow用户
发布于 2018-10-15 21:02:32
查看文档bs-vue collapse，您可以将逻辑建立在“兄弟-a”组件中的v-model上，并使用
/// on emitter
this.$root.$emit(...)
// on listener
this.$root.$on(...)为了让两个同级组件进行通信，将v-model的相同逻辑应用于‘sibling b’中的b-折叠组件。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51456240
复制相关文章
相似问题
腾讯云开发者
