vue自定义组件的几种方式

1.全局组件

定义方式示例：

Vue.component("hello-component", {
    props: ["message"],
    template: "<div ><h5>组件定义之全局组件</h5><h4>{{message}}</h4></div>"
});

使用：

<hello-component message="global component"></hello-component>

属性介绍：
Vue.component()：是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"
    })
 
    var newVue = new Vue({
        el: "#mac",
        data: {
            mydata: "春暖花开"
        }
    });
</script>```

使用：

```html
<div id="mac" >
    <input type="text" v-model="mydata" />
    <mymac v-bind:message="mydata"></mymac>
</div>

4.创建组件

定义方式示例：

<template id="cc">
    <div >
        <h1>{{message}}</h1>
    </div>
</template>

<script>
    Vue.component('templatec', {
        props: ["message"],
        template: "#cc"
    })
    new Vue({
        el: "#MyTemp"
    })
</script>
``