Vue.js之组件注册

<h4>注册全局组件</h4>
<div id="app-1">
    <my-component></my-component>
</div>
<script>
//注册 全局 组件
    Vue.component('my-component',{
        //选项
        template:'<div>这是全局注册组件</div>'
    })
//创建根实例
    var app1=new Vue({
        el:'#app-1',
    })
</script>




<h4>注冊局部组件</h4>
<div id="app-2">
    <div id="app-2">
        <my-component></my-component>
    </div>
</div>
<script>
var Child=Vue.extend({
    template:'<div>A custom component!</div>'
})

    var app3=new Vue({
        el:'#app-2',
        components:{
            'my-component':Child
        }
    })
</script>    



<h4>data必须是函数</h4>
<div id="app-3">
    <simple-counter></simple-counter>
    <simple-counter></simple-counter>
    <simple-counter></simple-counter>
    <simple-counter></simple-counter>
</div>
<script>
    var data = { counter: 0 }

    Vue.component('simple-counter',{
        template:'<button v-on:click="counter+=1">{{ counter }}</button>',
        data:function(){
            return {
                counter:0
            }
        }
    })
    var app4=new Vue({
        el:'#app-3'
    })
</script>


<h4>使用Prop传递数据</h4>
<div id="app-4">
    <child message="hello,vue.js"></child>    
</div>
<script>
    Vue.component('child', {
        // 声明 props
        props: ['message'],
        // 就像 data 一样，prop 可以用在模板内
        // 同样也可以在 vm 实例中像 “this.message” 这样使用
        template: '<span>{{ message }}</span>'
    })

    var app5=new Vue({
        el:'#app-4'
    })
</script>



HTML特性不区分大小写，当使用非字符串模版时，prop的名字形式会从camelCase转为kebab-case(短横线隔开)
<h4>camelCase-vs-kebab-case</h4>
<div id="app-5">
    <child my-message="hello!"></child>
</div>
<script>
    Vue.component('child',{
        props:['myMessage'],
        template:'<span>{{myMessage}}</span>'
    })
    var app6=new Vue({
        el:'#app-5'
    })
</script>

转自博客：https://www.cnblogs.com/LyMee/p/6394951.html