vue组件的封装与使用

vue组件的封装与使用

组件是可复用的 Vue 实例，且带有一个名字。组件的封装和复用可以使我们在开发中极大的提高效率，使代码更加简洁，方便维护。
1、在项目中通常把组件放在component文件夹中， 首先在component文件夹中新建一个vue页面，

//组件模板
<template>
    <div id="app">
        <button @click="count++">You clicked me{{count}} times</button>
    </div>
</template>
<script>
export default {
    name:'button-com', //组件名字
    props:{
    },
    data:function(){
        return {
            count:0
         }
    }
}
</script>

2、在要用组件的vue页面中进行组件的引用和注册。
（1）按需引用
对用于整个项目组件的复用率不是很高的时候， 我们一般采用按需引用的放在，在要用到的页面引用组件

// 引用组件
 import buttonCom from '../components/buttonCom';
 //注册组件
 export default {
    props:{

    },
    components:{      //注册组件
        buttonCom
    },
    data:function() {
        return {   }
    }
}

（2）全局引用
在项目入口文件中引用注册main.js

// 引用组件
 import buttonCom from '../components/buttonCom';
 //注册组件
Vue.use(buttonCom)

3、在vue页面中使用组件

<button-com></button-com>   //组件名字

组件基础的使用就这些啦，下篇介绍父子组件之间的传值及函数调用....