Vue--组件

组件的概念

组件（component）是Vue.js中最强大的功能之一。Vue中的组件化开发就是把网页的重复代码抽取出来，封装成一个个可复用的视图组件，然后将这些组件拼接到一块就构成了一个完整的系统，这种方式非常灵活，可以极大的提高我们的开发和维护效率。

例如：项目中可能会有头部，底部，页侧边栏，内容区等组件，每个组件又包含了其他的像导航链接之类的组件。

组件就是对局部视图的封装，每个组件包含了HTML结构，CSS样式，JS行为，

使用组件可以提高开发效率，增强可维护性，更好的解决软件上高耦合，低内聚，无重用的三大代码问题。

组件的基本使用

为了能在模版中使用，这些组件必须先注册以便Vue能够识别

有两种类型的注册类型，全局注册和局部注册。

全局注册

一般把网页中特殊的公共部分注册为全局组件：轮播图，分页，通用导航栏等。

全局注册之后，可以在任何新建的Vue实例（new Vue）的模版中使用

格式：

Vue.component('组件名',{

   template: '定义组件模版',
   data: function(){ // data选项在组件中必须是一个函数
   return {}
 } 
   // 其他选项
})

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id='app'>
        <!-- 引用组件时，组件名必须采用横线分割符 -->
        <component-a></component-a>  <!-- 引用组件 -->

    </div>
    <script>
        // 全局注册组件
        Vue.component('component-a',{
            // template选项指定组件的模版代码
            template: '<div><h1>头部组件---{{ name }}</h1></div>',
            data: function(){  // 在组件中，data选项必须是一个函数
                return {
                    name : '全局组件'
                }
            }
        })

        new Vue({
            el: "#app",

        })
    
    </script>
</body>
</html>

注意：如果template里的内容很多的时候，我们可以使用反单引号``，数字1旁边的

局部注册（子组件）

一般把一些非通用部分注册为局部组件，一般只适用于当前项目的

格式：

// 1. JS 对象来定义组件:
var ComponentA = { data: function(){}， template: '组件模板A'}
var ComponentA = { data: function(){}， template: '组件模板A'}

//2. 在Vue实例中的 components 选项中引用组件：
new Vue({
  el: '#app',
  data: {},
  components: { // 组件选项
    'component-a': ComponentA // key：组件名，value: 引用的组件对象
    'component-b': ComponentB
}
})

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id='app'>
        <!-- 引用组件时，组件名必须采用横线分割符 -->
        <component-b></component-b>  <!-- 引用组件 -->

    </div>
    <script>
        // 定义局部 组件对象 
        const ComponentB = {
            template: '<h1>这是 {{ name }}</h1>',
            data: function () {
                return {
                    name: '局部组件'
                }
            }
        }

        new Vue({
            el: "#app",
            // 组件选项
            components: {
                // key: value   key为组件名，value就是组件对象
                'component-b': ComponentB // 为了简洁把这个定义在外面
            }

        })
    
    </script>
</body>
</html>

实例

假设我们要使用组件化的思想完成下面的效果

可以使用全局组件的方式，代码如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <app-header></app-header>
        <app-main></app-main>
        <app-footer></app-footer>
    </div>

    <script>
        Vue.component('app-header', {
            template: '<div class="header"><h1>头部组件</h1></div>'
        })

        Vue.component('app-main', {
            template: '<div class="main"><ul><li>用户管理</li><li>帐单管理</li><li>供应商管理</li></ul></div>'
        })
        
        Vue.component('app-footer', {
            template: '<div class="footer"><h1>底部组件</h1></div>'
        })

        new Vue({
            el: '#app'
        }) 
    </script>
</body>

</html>

但是这样写有一个问题，那就是所有的代码都写在一起，看起来不美观，不易于维护，那我们可以把组件都抽取出来，在引用，目录结构如下

component目录下放的是我们的组件

Vue.component('app-footer', {
    template: '<div class="footer"><h1>底部组件</h1></div>'
})

Footer.js

Vue.component('app-header', {
    template: '<div class="header"><h1>头部组件</h1></div>'
})

Header.js

Vue.component('app-main', {
    template: '<div class="main"><ul><li>用户管理</li><li>帐单管理</li><li>供应商管理</li></ul></div>'
})

Main.js

我们就可以在多个组件示例中引用了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <app-header></app-header> 
        <app-main></app-main>
        <app-footer></app-footer>
    </div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script src="component/Header.js"></script>
    <script src="component/Main.js"></script>
    <script src="component/Footer.js"></script>
    <script>
        
        new Vue({
            el: '#app'
        }) 
    </script>
</body>
</html>

这样我们就完成了组件化，代码易于维护，以后想更改哪个组件，直接找对应的js文件就可以了

注意：template 模板中必须要的根元素，所以要在提取的内容外层加上 <div></div> , 一定要不要少了，不然报以下错误：