前端-uniapp-vue-自定义组件-傻瓜教学

一.创建自定义组件
1.在components文件夹中创建新界面

组件文档结构
<template name="组件名称">
	<view>
	    ......
	</view>
</template>
<script>
export default {
	name: "组件名称",
	//属性
	props: {
		属性名称: {
			type: String,//属性类型
			value: "值"
		},
		......
	},
	
	//组件生命周期
	created:function(e){
	
	},
	//相当于页面中onload
	computed(){
		
	},
	methods: {
		(fun)组件函数名称(obj){
		
		},
	}
}
</script>
<style>
组件样式
</style>

二.使用组件

<template>
	<view>
		<组件名称 ref="(b)组件名称"></组件名称>
	</view>
</template>

<script>
import 组件名称 from '@/components/组件名称/组件名称.vue';
export default {
	components: { 组件名称 },
	data() {
		return {

		};
	},
	methods: {
		this.$refs.(b)组件名称.(fun)组件函数名称()
	}
};
</script>

<style>

</style>