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> //组件名字

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