uni-app中子组件与父组件的相互通讯

随手写一下自己的浅显的理解

一.子组件从父组件获取数据

1.数据回传

我们在子组件中prop内声明需要用到的父组件值的类型，如：

props: { 
item: Object,
index: Number
}

这表明我们的子组件代码中只需要用到一个名为item的对象和一个名为index的数值。

下面是父组件中data内声明的item数据：

{
userPic: '../../static/demo/userpic/12.jpg',
userName: '昵称',
isSubscribe: false,
title: '我是标题1',
type: 'img', //img OR video
titlePic: '../../static/demo/datapic/21.jpg',
infoNum: {
flag: 0, //0->用户还没有操作；1->用户已经👍过；2->用户已👎过
likeNum: 10,
dislikeNum: 10
	},
//用对象因为每位用户只能👍或👎一次
commentNum: 10,
shareNum: 10
}

这样我们在写子组件时就可以使用父组件中这个item的内容，如：

<view class="index-list2" @tap="openDetail">{{ item.title }}</view>
<view class="index-list3" @tap="openDetail">
<image :src="item.titlePic" mode="widthFix" lazy-load></image>
<!-- widthFix宽度不变高度自变化，比例不变 -->

<template v-if="item.type === 'video'">
<view class="index-list-play icon iconfont icon-bofang"></view>
<view class="index-list-playInfo ">
<text>{{ item.playNum }}次播放 {{ item.videoTime }}</text>
</view>
</template>

</view>

这里就使用了父组件数据内的很多内容如title，playNum等等属性。

当然子组件只是父组件的组成部分，父组件引用子组件：

<index-list :item="item" :index="index1"></index-list>

这里:item，:index正是我们在子组件props中声明的部分，里面的内容填入父组件的数据。

当然，引用子组件之前还得import导入还有在components标签中注册，缺一不可：

import indexList from "../../components/index/index-list.vue";

components: {
indexList
//这里一定要对引入的组件进行注册
}

2.方法回传

子组件中写了一个点击方法

<view class="swiper-tab-list"	@tap="taptap(index)"/>

要将参数变化传给父组件，则在taptap该方法中写：

taptap(index) {
this.$emit('tapFun', index);
/* 触发当前实例上的事件。附加参数都会传给监听器回调 tabfun为自定义方法名，index为要传递的参数*/
}

那么我们在父调用该子组件时：

<swiper-tab-head :tabBars="tabBars" :tabIndex="tabIndex" @tapFun="tapFun">
</swiper-tab-head>

@tapFun为子组件中自定义的方法名，其中就带有参数index，接着在自定义方法tapFun中就可以使用该参数，如下：

tapFun(index) {
// console.log(index);
this.tabIndex = index;
}

二.父组件从子组件获取数据

我们在父子间中对引用的子组件写上注册ref信息，ref的值是可以自定义的

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例。

<uni-popup ref="showPOP"> </uni-popup>

接着就可以在方法中通过this.$refs.showPOP如此拿到子组件中的数据，可以进行取值或更改

close() {
// 使用$refs对子组件data进行内容更改
this.$refs.showPOP.showPopup = false;
}