uni-app 中的父子组件通信

        从uni-app介绍中可以知道，uni-app部分写法是与vue一致的，接下来展示的是在uni-app中的父组件的通信，内容如下：

一、创建组件

1、在index文件下创建components文件夹，并在其中创建listItem.vue文件，如下图所示：

图一  子组件所在路径

2、在组件中编写代码，如下：

 props:接收父组件传递的信息

$emit：触发父组件的事件

<template>
	<view class="list-wrap">
		
		<view class="name">{{item.name}}</view>
		<view class="title">
			{{item.title}}
		</view>
		<view class="btn">
			<button type="primary" size="mini" @click="handleClick">点击</button>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			item:{
				type:Object,
				default:()=>{}
			}
		},
		methods:{
			handleClick(){
				console.log('点击：',this.item)
				this.$emit("clickHandle",this.item)
			}
		}
	}
</script>

<style lang="scss">
	.list-wrap{
		width: 90vw;
		margin: 5px;
		border: 1px solid #666;
		padding: 5px;
	}
</style>

二、应用组件

引入组件，并在合适的位置写组件的渲染名称，代码如下：

<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
		<!-- 组件渲染 -->
		<list-item v-for="item in listArr" :key="item.id" :item="item" @clickHandle="getListClick"></list-item>
		
		<!-- 组件通信影响的数据展示 -->
		<view class="click-content">
			您选中的是:{{clickObj.name}}
		</view>
	</view>
</template>

<script>
	import ListItem from "./component/listItem.vue" //组件引入
	export default {
		components: {
			ListItem
		},
		data() {
			return {
				title: 'Hello',
				listArr: [{
						id: 1,
						title: 'hhhh',
						name: '张三峰'
					},
					{
						id: 2,
						title: 'mmmm',
						name: '赵灵儿'
					},
					{
						id: 3,
						title: 'ooo',
						name: '吴清风'
					}
				],
				clickObj: {
					name: ""
				}
			}
		},
		onLoad() {

		},
		methods: {
			// 触发事件
			getListClick(obj) {
				console.log('获取内容')
				this.clickObj = obj
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

三、运行结果 

1、默认父组件渲染的结果，如下图所示：

 图二  默认父组件渲染

2、当鼠标点击 "点击" 按钮，父组件更新内容如下图所示：

图三  子组件触发事件父组件内容重新渲染