Vue的组件

在从事前端页面的开发过程中，我们经常会遇到这样的场景：

某一块html代码可能是通用的，我既需要这个表结构在这里展示，另一个页面也需要有个相同的表格。我们之前的思路都是直接将这块代码粘贴过去，这种做法可以实现功能，但ES6给了我们更优雅的实现方式：组件。

我们可以将通用的html作为一个组件导出(export)，在需要它的地方直接导入即可。在单纯的JavaScript文件中实现这个需要借助打包工具，而Vue则天然的自带了这个操作。

组件的定义

通过如下指令即可创建一个名为button-center的Vue组件：

<script>
        //重复的功能定义为组件 短横线或者驼峰
        //全局注册,可以在任意Vue对象使用.
        Vue.component('button-center',{
            // props 与data的区别:props可以在标签上定义属性并传值回来.
            props: ['title'],
            // data必须是个函数,保证返回的count不唯一.
            data() {
                return {
                    count: 0
                }
            },
            // 一个组件的模板必须具有根节点
            template: '<div style="border: solid 5px">' +
                '<button @click="clickfun">{{title}}You clicked me {{ count }} times.</button>'
                + '<slot></slot>' + '</div>',
            methods: {
                clickfun:function () {
                    this.count++;
                    //触发一个事件,具体的参数
                    this.$emit('clicknow',this.count);
                },
            }
        });

        let component = new Vue({
            el: '#components-demo',
            data: {
            },
            methods: {
                printData:function (e) {
                    console.log(e);
                }
            }
        })
</script>

 <div id="components-demo">
        <!--    将事件捕捉到,并且将参数传入printData()    -->
        <button-center :title="123" v-on:clicknow="printData">
            <h2>我是一个插槽.</h2>
        </button-center>
        <button-center></button-center>
</div>

组件在框架中的应用