uniApp组件如何使用笔记

什么是组件

 对我感觉组件就是一个可以复用的Vue实例，例如在一个页面有两个复用的添加按钮

如何注册组件？

1.在components中新建一个father.vue

<template name="father">
	<view>
	
	</view>
</template>

<script>
	export default {
		name:'father',
		props:{
			
		},
		data() {
			return {
			   
			}
		},
		
		methods: {
		
			
		}
	}
</script>

<style>

</style>

2.在main.js中引用

import father from '@/components/father.vue'
Vue.component('father',father)

 3.在子页面引用即可

<template >
	<view>
		<father :list="treeList"></father>
		<father :list="treeList"></father>
	</view>
</template>

假设在A页面接受到的数据通过子组件遍历出来，如何在子组件的父组件接收到数据？

A界面样式

<template >
	<view>
		<father :list="treeList"></father>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				treeList:[
					{
						id:'1',
						name:'曲坊苗圃',
						array:[{
							name:'向日葵',
							num:1,
							id:33
						},
						{
							name:'洋槐花',
							num:3,
							id:44
						}
						]
					},
					{
						id:'2',
						name:'能源苗圃',
						array:[
							
						]
					}
				],
			}
		},
		methods: {
			
		}
	}
</script>

<style>

</style>

b界面接受并且遍历出来

immediate如果为true 代表如果在 wacth 里声明了之后，就会立即先去执行里面的handler方法

<template name="father">
	<view>
		<view style="margin-top: 50px;" v-for="(item,index) in treeArray">
			<view class="">
				<view class="">
					<view class="" @click="pointtitle(item)">
						{{item.name}}
					</view>
					<view class="" v-for="(sonItem,sonIndex) in item.array" style="padding-left: 15px;">
						{{sonItem.name}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:'father',
		props:{
			list:[Array]
		},
		data() {
			return {
			   treeArray:[],
			   number:5
			}
		},
		watch:{
		  list:{
			  immediate: true,
			  handler(newValue,oldValue){
				 this.treeArray = newValue
			  }
		  }	
		},
		methods: {
			/* 点击标题 */
			pointtitle(Item){
				for (var i = 0; i < this.treeArray.length; i++) {
				    if(Item.id==this.treeArray[i].id){
						if(this.treeArray[i].array.length==0){
							console.log('当前苗圃下没有苗木')
						}else{
							console.log('当前下面有')
						}
					}
				}
			},
			
			
		}
	}
</script>

<style>

</style>

假设点击子组件的时候怎么将数据传给父组件？

1.谁是父组件谁是子组件，总结就是谁包含谁谁就是父组件，这句话的意思是A界面有个组件B当点击B的某一项后会在A界面输出出来。

通过$emit 父子组件之间的通信

在B假面写pointemit（）这个函数，别的不看

<template name="father">
	<view>
		<view style="margin-top: 50px;" v-for="(item,index) in treeArray">
			<view class="">
				<view class="">
					<view class="" @click="pointtitle(item)">
						{{item.name}}
					</view>
					<view class="" v-for="(sonItem,sonIndex) in item.array" style="padding-left: 15px;" @click="pointemit(sonItem)">
						{{sonItem.name}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:'father',
		props:{
			list:[Array]
		},
		data() {
			return {
			   treeArray:[],
			   number:5
			}
		},
		watch:{
		  list:{
			  immediate: true,
			  handler(newValue,oldValue){
				 this.treeArray = newValue
			  }
		  }	
		},
		methods: {
			/* 点击标题 */
			pointtitle(Item){
				for (var i = 0; i < this.treeArray.length; i++) {
				    if(Item.id==this.treeArray[i].id){
						if(this.treeArray[i].array.length==0){
							console.log('当前苗圃下没有苗木')
						}else{
							console.log('当前下面有')
						}
					}
				}
			},
			// 把子组件值传递给父组件
			pointemit(item){
				 this.$emit('treeItem', item)
			}
			
		}
	}
</script>

<style>

</style>

在A界面接受

<template >
	<view>
		<father :list="treeList" @treeItem="treeItem"></father>
		<!-- <father :list="treeList"></father> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				treeList:[
					{
						id:'1',
						name:'曲坊苗圃',
						array:[{
							name:'向日葵',
							num:1,
							id:33
						},
						{
							name:'洋槐花',
							num:3,
							id:44
						}
						]
					},
					{
						id:'2',
						name:'能源苗圃',
						array:[
							
						]
					}
				],
			}
		},
		methods: {
			treeItem(item){
				console.log(item)
			}
		}
	}
</script>

<style>

</style>

一般组件搭配这插槽使用（之前写过放这里了）

(141条消息) vue插槽solt ，uni.app_liuwenqing11的博客-CSDN博客