四种组件定义方式都存在以下共性(血泪史)
规则：
1.组件只能有一个根标签
2.记住两个词全局和局部
3.组件名称命名中‘-小写字母’相当于大写英文字母(hello-com 相当于 helloCom)
而对于在HTML中自定义组件的时候有4种写法，不过也只是殊途同归，都是用template属性对应的只有一个根标签的HTML代码。
1.全局组件
定义方式示例：
Vue.component("hello-component",{
props:["message"],
template :"<div ><h1>组件定义之全局组件</h1><h4>{{message}}</h4></div>"
});使用
<hello-component message=" global component"></hello-component>属性介绍：
Vue.componen()是vue.js内部封装方法
“hello-component” 是使用时候的组件名称
props组件内的属性。供给组件内部传值
template组件内部DOM元素组成
品鉴
全局组件定义方式，是直接给全局对象Vue注册了一个组件。在本页内已挂载Vue 实例的DOM目标元素 都可以使用(区别于局部组件只能是挂载哪一个DOM，哪个才能使用)。
2.局部组件
定义方式示例：
var limitComponent = {
props:["message"],
template :"<div><h1>{{message}}</h1><input
type='text' v-model='message'></input></div>"
}
new Vue ({
el : "#app",
components :{
"child-component": limitComponent
}
});使用
<child-component message = "动态局部组件"></child-component>属性介绍：
el是 Vue 实例的挂载目标
“components” 是注册仅在其作用域中可用的组件
“child-component”组件的名称(书写规则请上翻再看规则)
limitComponent通过对象方式传递组件
品鉴
你不必把每个组件都注册到全局。你可以通过某个 Vue 实例/组件的实例选项 components 注册仅在其作用域中可用的组件。
js中用反斜线“”’实现字符串换行
3.Script方式注册组件
定义方式示例：
<script type="text/template" id="script-component">
<div >
<h2>自定义组件之script方式定义</h2>
<h4>{{message}}</h4>
</div>
</script>
<script>
Vue.component("mymac",{
props:["message"],
template:"#script-component"
