vue基础实践：组件命名的规则

最新推荐文章于 2023-10-21 16:50:31 发布

公子清

最新推荐文章于 2023-10-21 16:50:31 发布

阅读量492

点赞数 1

分类专栏：实践真题系列实践系列 Vue系列文章标签：组件命名的规则 javascript vue组件

本文链接：https://blog.csdn.net/Josiah_Yuan/article/details/106638026

版权

vue基础实践：组件命名的规则

组件的特点：
* - 可复用
* - 方便维护
* - 每一个vue组件都是一个独立的个体（独立的vm实例）：DATA是独立的（不同组件的data应该互不干扰）有完整的生命周期，方法等也是独立的
* - 能够实现组件的嵌套：需要掌握组件之间的信息通信
/
/
* 全局组件：无需单独引用或者配置，直接在大组件中调取全局组件即可
* Vue.component(componentName, options)
* + options可以使用的有vm实例具备的一切（DATA，methods，生命周期函数。。。）
* + 每调用一次组件都是创建一个单独的vue实例（Vuecomponent -> Vue）
* 组件命名的规则：
* + kebab-ase: 横线作为分隔符，只能基于kebab方式调取
* + PaselCase: 单词首字母大写，也是基于kebab方式调取
* + 调取组件的时候，会把所有组件的单词渲染为小写字母(我们命名的时候除PasalCase模式外，我们都要把组件名设置小写，调取组件的时候可以是大写也可以是小写（最后都是按照小写渲染的）)
* + 命名的时候尽量不要出现其余的特殊字符
*/

真实项目中优先使用第一种kebab-ase方式调取: 横线作为分隔符

      Vue.component('my-button', {
   
          template  :'<button>组件中的按钮</button>',
          created(){
   
              console.log(this);
          }

      });

<!DOCTYPE html>
<

最低0.47元/天解锁文章

公子清

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue基础实践：组件命名的规则

vue基础实践：组件命名的规则组件的特点：* - 可复用* - 方便维护* - 每一个vue组件都是一个独立的个体（独立的vm实例）：DATA是独立的（不同组件的data应该互不干扰）有完整的生命周期，方法等也是独立的* - 能够实现组件的嵌套：需要掌握组件之间的信息通信//* 全局组件：无需单独引用或者配置，直接在大组件中调取全局组件即可* Vue.component(componentName, options)* + options可以使用的有vm实例具备的一切（D
复制链接

扫一扫