在使用 render() 和 JSX 时使用 Bootstrap-Vue答案

【问题标题】：Bootstrap-Vue usage when utilising render() and JSX在使用 render() 和 JSX 时使用 Bootstrap-Vue
【发布时间】：2018-08-31 03:34:32
【问题描述】：

我已经阅读了 Bootstrap Vue 的文档，并在几天前在他们的 github 问题跟踪器上提出了这个问题，但没有运气。

我找不到任何与使用 Vue 的 render() 或 JSX 生成引导 vue 元素有关的内容。

即使是最简单的场景，例如单击按钮打开模式，我也遇到了麻烦。

const vue2 = new Vue({
    el: '#vue2',
    data: function() {
        return {
            show: false
        }
    },
    render() {
        return(
            <div>
                <b-btn v-b-modal="'myModal'">Show Modal</b-btn>
                <b-modal id="myModal">
                    Hello From My Modal!
                </b-modal>
            </div>
        )
    }
});

元素实际上是在 HTML 中呈现的：

但是按钮上的“点击”事件不起作用。

如果我在控制台中记录 Vue 实例，则 this.$refs 中也没有对模态实例的引用。

bootstrap-vue 是否支持 Vue 的 render() 和 JSX 功能？如果有，这种事情是如何实现的？

【问题讨论】：

标签： vue.js jsx bootstrap-vue

【解决方案1】：

所以，我花了相当多的时间研究这个。我无法让上述工作，这可能是 Bootstrap-Vue 中的一个错误。

我最终将自己的 ref 添加到 Vue 对象，并在点击时手动调用函数以显示模式。

下面的示例，供遇到此问题的任何人参考。

const vue2 = new Vue({
    el: '#vue2',
    data: function() {
        return {
            modalShow: false
        }
    },
    methods: {
        showModal() {
            this.$refs.myModal.show()
        }
    },
    render() {
        return(
            <div>
                <b-btn on-click={this.showModal}>Show Modal</b-btn>
                <b-modal ref="myModal">
                    Hello From My Modal!
                </b-modal>
            </div>
        )
    }
});

【讨论】：