全局组件的注册：Vue.component(tagName, options)
tagName：组件名称
options：组件的选项，比如组件模板templates、组件属性数组或对象props、
以及组件的初始数据data等
下面注册一个名称为"child"的组件，其模板套的是<span>标签
Vue.component('child', {
props: ['myMessage'],
template: '<span>{{myMessage}}</span>',
})
在面向对象的编程中，我们对属性其实不陌生了，同理，在Vue组件中，属性其实和对象
中的属性理解是一样的，只不过一个是对象的属性，一个是组件使用的DOM对象的属性，
当我们给属性设置值的时候，其实就是触发了属性的setter，当我们使用属性值的时候
触发了getter
组件注册好了，我们要怎么使用它了？下面的可行吗？
<div>
<child myMessage='Hello'></child>
</div>
1：全局组件注册，必须要在根Vue实例实例化之前注册，也就是说，当前demo中并没有
什么所谓的根Vue实例，而child组件使用的时候，其作用域内的div元素也没有被挂载
到任何的Vue实例上，因此，下面这种写法
毫无意义，浏览器中解析结果也是一片空白，什么都没有
so，我们改造下吧，使用组件之前，我们给当前的div层挂载到一个Vue实例上
我们以为这样就可以了，殊不知，浏览器解析又是一片空白
为什么呢？ 我们再来说一下，上面这种写法存在的第二个错误的地方
2：HTML属性会忽略大小写，比如 aB，HTML读的时候就是ab，对照上面的组件属性myMessage，HTML读的就是mymessage，而我们知道属性在setter的时候，是严格按大小写匹配来的，因此，组件中的myMessage 和 HTML读到的mymessage是两个完全不同的属性啊，这就好比两个双胞胎一样，表面上长的一样，但就算一样，也不能说是同一个人吧，不信的话，下面可以证明：
如果这种写法，在浏览器中可以解析出'Hello'，就证明了上述的说明没毛病
不要感到奇怪，W3C规则就是这么定的，你要是反着写，就解析不出来了，因为组件在getter的时候，死活找不到myMessage属性，因为被HTML给雪藏了，哈哈
别慌，别捉急，针对这个Vue给我们提供了一个解决办法，那就是：在使用非字符串模板(non-string template)时，驼峰式命名的 prop 名称，需要转换为同等相应的串联式命名（连字符分隔）
换句话说，就是，如果我们属性的命名规则是大小写形式的，那么它就是符合驼峰式命名，这时候，我们就可以将myMessage转换为同等相应的串联式命名my-message
还比如Mybatis的数据表列字段映射成Java实体类的时候，其中属性一项也是支持这种形式的命名对等转换的
因此，我们回到正路，纠正demo如下
<body>
<div id='app'>
<child my-message='Hello'></child>
</div>
</body>
<script>
Vue.component('child', {
props: ['myMessage'],
template: '<span>{{myMessage}}</span>',
})
new Vue({
el:'#app'
})
</script>
我们再来思考一个问题，既然组件有自己的属性，那么它必然是一个对象，没有对象，哪来的属性呢？因此，我们就想，能不能在使用组件的时候，对它进行数据初始化呢？比如，我们给span绑定一个默认值，而这个值就是注册组件时，给组件一个getter性质的data函数来实现的，这就不得不请出options成员data了
这样一来，我们就没有用组件本身自带的属性myMessage，而是给组件初始化了一个data并绑定了一个初始值message，因此，我们在浏览器中看到的是
这样会造成一个弊端，那就是每个使用组件的DOM对象都将会引用同一个iniData对象，如果想让每个组件引用的数据对象不一样，我们可以这样做
上面是静态绑定属性prop，我们也可以利用v-bind实现属性的动态绑定，如下
我们在Console中，动态改变message的值如下
1061
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
