uni-app 自定義組件引用

 紅框框起來的部分是引入的

目錄結構：

組件頁/template/swiper.vue

<template name="uniSwiper">
	<view class="page-section-spacing">
		<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
			<swiper-item><view class="swiper-item uni-bg-red">A</view></swiper-item>
			<swiper-item><view class="swiper-item uni-bg-green">B</view></swiper-item>
			<swiper-item><view class="swiper-item uni-bg-blue">C</view></swiper-item>
		</swiper>
	</view>
</template>

<script>
export default {
	name: 'uniSwiper',
	data() {
		return {
			autoplay: true,
			interval: 3000,
			duration: 500
		};
	}
};
</script>

<style>
.swiper {
	width: 100%;
	height: 300px;
}
.swiper-item {
	width: 100%;
	height: 100%;
}
.uni-bg-red {
	background: red;
}
.uni-bg-green {
	background: #4cd964;
}
.uni-bg-blue {
	background: #007aff;
}
</style>

引用頁/home/index.vue

<template>
	<view>
		<!-- 輪播-->
		<uniSwiper></uniSwiper>
	</view>
</template>

<script>
import uniSwiper from '../template/swiper.vue';
export default {
	data() {
		return {
		};
	},
	onLoad: function() {},
	components: {
		uniSwiper
	},
	methods: {}
};
</script>

<style>
</style>