【uni-app 怎么写组件，怎么全局引用组件，引用组件时怎么改变组件里的文字】

uni-app怎么写组件

这里给大家写一个返回上一页的组件

1.右击项目新建一个目录components,新建一个组件，命名，勾选创建同名目录

2.写标签和样式，字体图标不会写的小朋友可以去这里看字体图标学习链接，如果不需要字体图标换别的标签也是可以的

一个好的组件的样式是可以在引用的时候做修改的，第三点会说明这些参数，都是一一对应的

<template>
	<view class="come_back fle">
		<view class=" fle fle_end mle20 mbo30" :style="{height:height+'rpx'}">
			<view class="iconfont fle_end fon_3" @tap="come_b" :style="{fontSize:size + 'rpx',color:color}" >
				&#xe605;
			</view>
			<view class="fle fle_end  mle10"  >
				<text class="fle" :style="{alignSelf:text_fle_what,fontSize:text_size+'rpx',color:text_color}">
					<!-- 我有一头小毛驴我从来也不骑 -->
					{{text_name}}
				</text>
			</view>
		</view>
	</view>
</template>

3.组件默认值，标签里写样式是小驼峰命名：样式的值，

现在要给样式的值命名后再赋值的话我用的是小写加下划线来命名的，这里的顺序依次是：字体图标的大小，文字大小，文字内容，字体图标颜色，文字颜色，标签高度，文字位置（弹性布局）---------一整个组件可能会改的样式都在这里了

<script>
	export default {
		name:"come_back",
		props:{
			size:{
				type:Number,
				default:40
			},
			text_size:{
				type:Number,
				default:48
			},
			text_name:{
				type:String,
				default:'哦？'
			},
			color:{
				type:String,
				default:'white'
			},
			text_color:{
				type:String,
				default:'white'
			},
			height:{
				type:Number,
				default:80
			},
			text_fle_what:{
				type:String,
				default:'flex-end'
			}
		},
		data() {
			return {
				
			};
		},
		methods:{
			come_b(){
				uni.navigateBack({
				
				})
			},
		}
	}
</script>

css

	.come_back{
		height: 160rpx;
		width: 100%;
		background-color: #007AFF;
		position: fixed;
	}
		    .fle{
	        display: flex;
	    }
	    	    .fle_end{
	        align-self: flex-end;
	    }
	    	    /* 距离 */
	    .mto10{
	        margin-top: 10rpx;
	    }
	    .mto15{
	        margin-top: 15rpx;
	    }
	    .mto20{
	        margin-top: 20rpx;
	    }
	    .mto30{
	        margin-top: 30rpx;
	    }
	    .mto40{
	        margin-top: 40rpx;
	    }

4.单页面使用

在页面使用组件，首先引用，这里在标签里适当修改一些基础样式，比如这个标签的高，字体图标的大小，文字标签的内容，文字大小

<template>
	<view>
			<come_back :height="80" :size="68" text_name="首页" :text_size="36">
				
			</come_back>
	</view>
</template>


<script>
	// 给组件命个名
	import come_back from "@/components/come_back/come_back.vue"
	export default {
		// 挂载组件
		components: {
			come_back
		},
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

5.全局使用组件

在main.js里引用组件后挂载，就可以在每个页面使用了，'comeBack’是组件使用时的标签名

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

import comeBack from './pages/component/come-back/come-back.vue'//挂载
Vue.component('comeBack',comeBack) //挂载
import botton from './pages/component/botton/botton.vue'//挂载
Vue.component('botton',botton) //挂载

App.mpType = 'app'

const app = new Vue({
    ...App
})
app.$mount()

一个简单的组件就这样写好了，你学会了吗？