随手写一下自己的浅显的理解
一.子组件从父组件获取数据
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;
}