13.1，组件的概述

什么是组件

组件的出现，就是为了拆分Vue实例的代码量，能够让我们以不同的主键，来划分不同的功能模块，将来我们需要什么样的功能，就就可以直接去调用对应的组件即可

组件化和模块化的不同

• 模块化，是从代码的逻辑角度划分的
• 组件化，是从UI界面的角度进行划分的，前端的组件化，方便UI组件的重用

如何定义全局组件

方式一

1. 使用Vue.extend来创建全局的Vue组件（全局)（template用于定义组件信息）

2. 使用Vue.component('组件的名称',创建出来的组件模板对象)

   组件的名称就是将来在引用时可以直接使用标签的形式引用

实例：

<div id="app">
<my-code></my-code>
</div>
<script>
    var aa=Vue.extend({
        template:'<h3>这是一个通过组件创建的html代码</h3>'
    })
    Vue.component('myCode',aa)
    var vm=new Vue({
        el:'#app',
        data:{}
    })
</script>

注意的是，在注册的时候，可以使用驼峰命名法，但是在使用的时候遇到驼峰，需要以-的形式解析

例如在注册时组件名称是myCode，那么他的标签就是“my-code”

直接创建

Vue.component('myCode',Vue.extend({
    template:"<h2>这个使用第二种方式创建的html</h2>"
}))

这一步，就相当于匿名的使用，直接将创建extend的对象拿过来放在一起使用

方式二

Vue.componse('myCode',{

    template:'<h3>第二种方式创建组件</h3>'

})

这种方式要简单一点

而且这样创建的组件，不能有两个平级的两个元素，也就是说在template中支持使用

<div><h1>这是第一个</h1><span>这是第二个</span></div>

使用一个div包裹一下

不允许使用这样

<h1>这是第一个</h1><span>这是第二个</span>

无论是哪种方式创建的组件，组件的template属性指向的模板内容必须有且只有一个根标签

方式三

将组件的template对应的模板结构丢在外面定义

具体使用：

1. 定义一个组件

   Vue.component('myCode1',{
    template:'#temp1'
   })
   

2. 在被el标记的标签的外部定义template的模板结构

   <template id='temp1'>
    <div>
           <h1>哈哈</h1>
           <h2>嘿嘿</h2>
       </div>
   </template>
   

注意点是，这个template的模板结构必须是在未定义的Vue信息外部定义

---

<div id="app">
<my-code></my-code>
</div>
<!--<template id="temp1">-->
<!--    <div><h1>哈哈哈</h1><h2>嘿嘿嘿</h2></div>-->
<!--</template>-->
<script>
<!--第一种方式-->
    // var aaa=Vue.extend({
    //     template:'<h3>这是一个通过组价的方式创建的html</h3>'
    // })
    // Vue.component('myCode',aaa)
    //第二种方式
    // Vue.component('myCode',Vue.extend({
    //     template:"<h2>这个使用第二种方式创建的html</h2>"
    // }))
    //第二种方式
    // Vue.component('myCode',{
    //     template:'<div><h1>哈哈哈</h1><h2>嘿嘿嘿</h2></div>'
    // })
    //第三种方式
    // Vue.component('myCode',{
    //     template:'#temp1'
    // })
    var vm=new Vue({
        el:'#app',
        data:{}
    })
</script>

1556434715683.png

定义局部（私有）组件

这个时候就有下一个components组件

这种定义私有组件的形式的定义方法

components:{
    组件名:{
        template属性
    }
}

var vm=new Vue({
    el:'#app',
    data:{},
    components:{
        myCode:{
            template:'<h1>哈哈哈哈哈</h1>'
        }
    }
})

组件中的data和methods

1. 组件可以有自己的data
2. 组件的data和实例的data有点不一样，实例中的data可以是一个对象，但是组件中的data必须是一个方法
3. 组件的data除了必须是一个方法之外，这个方法内部，还必须返回一个对象才行
4. 组件中的data数据使用方式和实例中data的使用方式完全一样

<div id="app">
<my-code></my-code>
</div>
<script>
    Vue.component('myCode',{
        template:'<h1>这是一个全局组件---{{msg}}</h1>',
        data(){
            return {
                msg:'这是在组件中定义的数据'
            }
        }
    })
    var vm=new Vue({
        el:'#app',
    })
</script>