vue-封装组件

平时经常遇到需要封装一个组件的情况，因此记录一下

为什么要封装组件？

1. 能够把页面抽象成多个相对独立的模块
2. 实现代码重用，提高开发效率和代码质量，使得代码易于维护

步骤：这里我主要是将一个vue实例给封装起来，也算比较简单。

1. 新建一个vue实例文件，并写好代码
2. 在需要使用的页面进行引入，我使用的是import demo from '@/components/demo.vue'
3. 进行注册，这里分为全局注册和局部注册两种。全局注册则需要在Vue.component('demo')注册；局部注册则在实例中的components:{ demo }即可。
4. 最后在需要的地方使用，同时也可以进行传值操作。

以上便是大致步骤，下面是我的demo。

首先是封装的组件，即子组件：

<template>
    <div class="demo">
        //...这里存放编写的子组件代码
    </div>
</template>
<script>
    export default{
        name:'demo',
        props:['value1','value2'],//这里接收父组件的数据
        data(){
            return{
                //这里放组件内部数据
                form:{}
            }
        },
        created(){},
        watch:{         
        },
        methods:{
            sendDemoData(){
                this.$emit('func',form)
            }
        }
    }
</script>
<style lang="scss" scoped>
.demo{
    width:100%;
    height:100%;
}
</style>

接下来是调用组件的页面，可以理解为父组件：

<template>
    <div class="parent">
        //注入pValue1和pValue2
        <demo :value1='pValue1' :value2='pValue2' @func="getDemoData"></demo>
    </div>
</template>
<script>
    import demo from '@/component/demo.vue'
    export default{
        name:'parent',
        data(){
            return{
                pValue1:'hello',
                pValue2:'world'
            }
        },
        components:{demo},//在此注册
        created(){},
        watch:{},
        methods:{
            getDemoData(val){
                console.log(val);
            }
        }
    }
</script>
<style lang="scss" scoped>
.parent{
    width:100%;
    height:100%;
}
</style>