一、组件概念

　　组件其实就是一个拥有样式、动画、js逻辑、HTML结构的综合块。前端组件化确实让大的前端团队更高效的开发前端项目。而作为前端比较流行的框架之一，Vue的组件和也做的非常彻底，而且有自己的特色。尤其是她单文件组件开发的方式更是非常方便，而且第三方工具支持也非常丰富，社区也非常活跃，第三方组件也呈井喷之势。当然学习和使用Vue的组件也是我们的最重要的目标。

二、创建组件（备注：本页面下的所有vue.js文件都放在和html页面同一个文件夹下的）

1.局部组件

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>局部组建</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <p>{{ textArea }}</p>
    <my-component></my-component>
    <script>
        var Child = {
            template: '<div>局部组建</div>'
        }
        var app = new Vue({
            el: '#app',
            data: {
                textArea: '局部组建'
            },
            components: {
                'my-component': Child
            }
        });
    </script>
</div>
</body>
</html>
其中下图部分分别为注册全局组件和应用全局组件

       

 

 



2.全局组件


HTML代码：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue组件</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <p>{{ textArea }}</p>
    <my-component></my-component>
</div>
<script>
    Vue.component('my-component', {
        template: '<div>全局组件</div>'
    })
    var app = new Vue({
        el: '#app',
        data: {
            textArea: 'aa'
        },
    });
</script>
</body>
</html>
其中下图部分分别为注册全局组件和应用全局组件


      


三、组件的slot


　　使用组件的时候，经常需要在父组件中为子组件中插入一些标签等。当然其实可以通过属性等操作，但是比较麻烦，直接写标签还是方便很多。 那么Vue提供了slot协助子组件对父容器写入的标签进行管理。


项目例子（html代码）：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组建插槽</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <p>{{ textArea }}</p>
    <app-layout>
        <h1 slot="header">头部</h1>
        <p>段落。</p>
        <p slot="footer">尾部</p>
    </app-layout>
    <script>
        var Child = {
            template: '<div class="container"> <header> ' +
            '<slot name="header"></slot> </header> <main> <slot></slot> </main> <footer> ' +
            '<slot name="footer"></slot></footer></div>'
        }
        var app = new Vue({
            el: '#app',
            data: {
                textArea: 'slot'
            },
            components: {
                'app-layout': Child
            }
        });
    </script>
</div>
</body>
</html>
运行结果：