vue入门中组件命名时需要注意的地方

下面这张图是从vue官方上截取的 

其实不只是驼峰命名的prop在自定义标签中需要用等价的短横线分隔命名，组件自定义的标签名称也一样 

还是官网的例子只不过我把组件的名称改为驼峰式为  blogPost

Vue.component('blogPost', {
  // 在 JavaScript 中是 camelCase 的
  props: ['postTitle'],
  template: '
{{ postTitle }}
'
})

如果在html中自定义标签想当然的认为是blogPost，并按如下的方式写将会报错 

完整代码

    
    



    
演示驼峰式命名的自定义标签的写法
    
    
    

 想达到的效果页面显示两行

第一行父组件的

演示驼峰式命名的自定义标签的写法

第二行动态传值给子组件的

hello world!

当然

浏览器解析并不会显示

浏览器查看效果只显示第一行即父组件的'

'标签的内容，为什么呢打开浏览器开发者工具，报错信心如下：

 问你注册组件了吗，发现没这里都是小写了并不是blogPost，我们在html中将自定义标签修改为短横线分隔命名（相对于定义组件时的驼峰式）

再来查看，达到预期效果