本文给大家介绍Vue组件快速入门方法。

Vue组件是将我们常用的东西封装成一个可以简单调用的标签

比如常见的底部导航组件

<footer tab="home"></footer>

footer.vue

<template>
  <view>
    <view class="footer-row"></view>
	<view class="footer">
	    <view @click="goHome()"  v-bind:class="{'footer-active':tab=='home'}" class="footer-item icon-home">
		 首页
	    </view>
            <view @click="goUser()"  v-bind:class="{'footer-active':tab=='user'}" class="footer-item icon-my_light">
		我的 
	    </view>
		
        </view>
    </view>
</template>

<script>
    export default {
        name:"default-footer",
        props:{
	    tab:""
	},
	data:function(){
	    return {
	        title:"deituiCms的uniApp帖子"
	    }
	},
	created:function(){
	},
	methods:{
	    goHome:function(){
		uni.redirectTo({
    		    url:"../index/index"
		}) 
	    },
			
	    goUser:function(){
		uni.navigateTo({
		    url:"../user/index",
		})				
	    },	
        }
    }
</script>

Vue组件也是一个vue文件，它有几个不一样的地方

一个是props属性，一个data必须是函数

props的值只是定义类型,并且不能修改，在组件模板中使用的变量建议都是在data中的

props:{
    a:0,
    b:false,
    c:"",
    d:{}
}，
data:function(){
    return {
        title:"这是标题",
        str:""
    }
}，
created:function(){
     this.str=this.c;   
}

更多内容请看uniApp开发笔记