vue:命名

一、命名

原因:HTML特性不区分大小写;没完全明白

https://www.cnblogs.com/cjll/p/13706747.html

1、vue组件的驼峰命名(camelCase)与短横线分割命名(kebab-case)

(1)组件采用驼峰命名:myComponent:在DOM模板(HTML中)中使用时(非字符串的模板),需要转换为短横线分割命名,即:my-component

(2)组件短横线分割命名时,引用自定义的组件时,也需要采用这个命名方式,即保持一致;

(3)组件还有一种采用PascalCase命名(首字符也大写)时,在DOM模板中,既可以采用原有的PascalCase命名,也可以转换为短横线分割命名;(不过也有不同的说法,未明白:https://www.cnblogs.com/cjll/p/13706747.html)

(4)组件直接采用首字母大写的当个单词,如Item;切不可以全小写字母;

(5)如果采用字符串模板('<div></div>'),仍然可以忽略这些限制;

2、父组件向子组件传递数据:props中变量

(1)props名称如果采用驼峰命名,在DOM模板中使用时,要转换为短横分割命名;如

<div id="app">
    <my-component warning-text="提示信息"></my-component>
</div>
<script>
    Vue.component('my-component', {
        props: ['warningText'],
        template: '<div>{{ warningText }}</div>'
    });
</script>    

(2)props名称也可以直接采用全是小写字母,特例如:props: [ 'message' ]

(3)别的命名待测试

(4)如果使用的是字符串模板,可以忽略这些限制;

二、

posted @ 2021-12-04 14:47  kuaqi  阅读(96)  评论(0编辑  收藏  举报