【uni-app】uni-app封装组件详细教程（Vue同理）

第一步

新建一个组件，命名为item.vue（命名只是举例）
HTML部分：

<template>
	<view class="content">
		<view>{{item}}</view>
		<view @click="indexClick(index)">{{index}}</view>
		<view>{{str}}</view>
		<view>{{title}}</view>
	</view>
</template>

JS部分：

<script>
	export default {
		//props,是父组件/页面传进来的参数
		props: {
			item:{
				type:Object, //参数的类型
				default:{} //参数的默认值
			},
			index:{
				type:Number,
				default:0
			},
			str:{
				type:String,
				default:''
			},
		},
		data() {
			return {
				title:'标题', //组件定义的参数也可以正常使用
			}
		},
		methods:{
			indexClick(index){
				this.$emit('update',index)
				//update是触发父组件的方法
				//index是传递到父组件的值
			},
			childMethod(){
				//父组件调用子组件的方法
			}
		}
	}
</script>

第二步

新建一个index.vue页面
HTML部分：

<view class="dev">
	<item ref="main" :item="item" :index="index" :str="str" @update="update"></item>
	<view @click="dataAction">使用子组件的事件</view>
</view>

JS部分：

<script>
import item from '@/components/item.vue' //路径要对应
export default{
	components: {
		item //定义组件
	},
	data(){
		return{
			item:{},
			index:1,
			str:'123'
		}
	},
	methods:{
		update(e){
			console(e)	//e是子组件传递过来的值，就是子组件的index
		},
		dataAction(){
          this.$refs.main.childMethod() 
          //这是页面触发子组件的方法
          //main是组件的ref
        }
	}
}
</script>

简单的封装一个组件就完成了！有什么不懂的，都可以问喔！