前端-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>