从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、当鼠标点击 "点击" 按钮,父组件更新内容如下图所示:
图三 子组件触发事件父组件内容重新渲染