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

Posted 2023-02-23

【中文标题】VueJS - 绑定自定义道具不适用于 b-form 组件

【英文标题】：VueJS - Binding custom prop doesn't work with b-form component

【发布时间】：2019-12-15 00:26:25

【问题描述】：

我按照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 没有按预期绑定到组件的模板。我刚得到一个没有标签的复选框。为什么会发生这种情况？提前致谢！

【参考方案1】：

在处理 props 时，您应该使用 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>`
    );