6. Vue组件（基础）

一、组件基本概念

Vue可以进行组件化开发，组件是Vue的基本结构单元。 在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例。
组件主要以页面结构的形式存在，不同组件也具有基本交互功能，根据业务逻辑实现复杂的项目功能。
组件只有注册后才能使用

二、组件注册

2.1 全局注册组件

全局注册组件：Vue.component(id[,definition])

<div id="app">
    <my-component></my-component>
    <my-component></my-component>
    <my-component></my-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    //全局注册组件
    Vue.component('my-component',{
    
        data:function () {
    
            return {
    count:0}
        },
        template:'<button v-on:click="count++">被单击{
    {count}}次</button>'
    });


    var vm=new Vue({
    
        el:'#app'
    });
</script>

组件内部具有自己的独立作用域，不能直接被外部访问。所以单击每一个按钮，每个组件都会各自独立维护它的count。因为你每用一次组件，就会有一个它的新实例被创建。

因为组件是可复用的 Vue 实例，所以它们与new Vue接收相同的选项，例如data、computed、watch、methods以及生命周期钩子等。仅有的例外是像el这样根实例特有的选项。

2.2 局部注册组件

局部注册组件通过Vue实例的components属性来实现的。

<div id="app">
    <my-component></my-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var com1={
    
        template:'<p>我是vm实例中的局部组件</p>'
    };
    var vm=new Vue({
    
        el:'#app',
        components:{
    myComponent:com1}
    });
</script>

注意：<my-component></my-component>与模版注册时Vue语句为components:{myComponent:com1},加-与驼峰命名规则的对应关系。

2.3 template模版

template模板是用字符串保存，这种方式容易出错，也不适合复杂的