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> //组件名字
组件基础的使用就这些啦,下篇介绍父子组件之间的传值及函数调用....