VueJS-绑定自定义道具不适用于b-form组件

Question

我遵循此vue doc来创建具有以下自定义属性的自定义组件：

    Vue.component('y-form-checkbox', {
    props: ['chkLabel'],
    template: `<b-form-group label="label">
                <b-form-checkbox>
                  {{ chkLabel }}
                </b-form-checkbox>
            </b-form-group>`
    });

然后我像下面这样使用该组件：

<y-form-checkbox chkLabel="Something special"></y-form-checkbox>

但是问题是chkLabel没有按预期绑定到组件的模板。我刚得到一个没有标签的复选框。为什么会这样？预先感谢！

Answer 1

在处理重量道具时，您应该使用 cabab-case 格式，而不是 camelCase 格式：

 <y-form-checkbox chk-label="Something special"></y-form-checkbox>

并以 camelCase 格式保存在组件道具声明中：

  Vue.component('y-form-checkbox', {
    props: ['chkLabel'],
    template: `<b-form-group label="label">
                <b-form-checkbox>
                  {{ chkLabel }}
                </b-form-checkbox>
            </b-form-group>`
    });