uni-app 自定义组件引用

快来打我* 2021-07-25 00:24 619阅读 0赞

红框框起来的部分是引入的

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70][]

目录结构：

![2019111916314661.png][]

组件页/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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70]: /images/20210724/1bf471edd821422f989b6f57480c60ce.png
[2019111916314661.png]: /images/20210724/5eff7e446bba4d3bbd5ef975d792f236.png