Vue.js组件学习（3）升级篇

1. 组件的命名规则

1.1 两种命名可选方案

使用kebab-case(短横线分隔命名)方法命名

Vue.component('my-component-name', { /* ... */ })
当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如 <my-component-name>。

使用PascalCase(驼峰命名法)方法命名

Vue.component('MyComponentName', { /* ... */ })
当使用 PascalCase (首字母大写命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。也就是说 <my-component-name> 和 <MyComponentName> 都是可接受的。注意，尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。

1.2 强烈建议使用kebab-case命名法

命名组件的时候，强烈推荐使用kebab-case方法命名。这样可以避免和HTML既有元素相冲突。

2. 组件中的props命名规则

HTML中的attribute名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用DOM中的模板时，camelCase (驼峰命名法)的prop名需要使用其等价的kebab-case(短横线分隔命名)命名：

Vue.component('blog-post', {
  // 在 JavaScript 中是 camelCase 的
  props: ['postTitle'],
  template: '<h3>{{ postTitle }}</h3>'
})

<!-- 在 HTML 中是 kebab-case 的 -->
<blog-post post-title="hello!"></blog-post>

如果你使用字符串模板，那么这个限制就不存在了。

3. 组建的全局注册和局部注册

3.1 全局注册和使用。

Vue.component("Com-Name",{...});

全局注册后，任何新创建的Vue根实例id对应的模板中都可以直接使用。

3.2 局部注册和使用

var newCom = {...}

局部注册后，如果需要使用，则需要在创建的Vue的components选项中先定义你想要使用的组件。

var vm = new Vue({
el:"app",
components:{
    'new-com':newCom
}
data:{}
});