全局注册组件

文章目录

• 全局计算器组件
• data属性
• inline-template
• X-Template
• 组件名称

---

一、全局计算器组件

第一个参数counter是组件的名称，第二个参数是定义对象，这里有两个属性template和data。

<div id="app">
    <counter></counter>
    <counter></counter>
    <counter></counter>
    <p>{{msg}}</p>
</div>

<script>  
Vue.component('counter', {  
    data: function() {  
        return {  
            num: 0  
        };  
    },  
    template: '<button @click="increment">单击了{{ num }}次</button>',  
    methods: {  
        increment: function() {  
            this.num++;  
        }  
    }  
});  
  
let app = new Vue({  
    el: "#app",  
    data: {  
        msg: 'Yang'  
    }  
});  
</script>

二、data属性

template属性可以用来定义模版内容，其属性值类型必须为字符串，它必须是单个根元素

data: function() {  
        return {  
            num: 0  
        };  
    },

三、inline-template

由于在使用<counter>时使用了inline-template属性，组件会将其内部的html内容当成组件模版，定义时虽然有template属性，但是不会起作用。 

<counter inline-template>
    <button @click="num++">单击{{num}}次</button>
</counter>
<counter inline-temlate>
     <span class="btn" @click="num++">
         计数{{num}}次
     </span>
</counter>

---

四、X-Template

通过'text/x-template'指定其为Vue组件模组

<script type="text/x-template" id="x-btn">
    <button @click="num++">{{num}}</button>
</script>

五、组件名称

在注册组件时，始终要有一个组件名称，它是通过Vue.component()第一个参数确定的。

组件名称可以两种有两种写法：kebab-case和PascalCase