四.UniApp入门教程- 组件封装，父子组件通信

上一节对Api进行集中管理和请求封装，这节在基础上对列表信息进行组件封装 新建文件夹“Component”，创建子组件news-list.vue,把index.vue中列表的内容和样式复制过来 子组件页面：

 1 <template> 
 2     <navigator 
 3     hover-class="navigator-hover">
 4       <u-row gutter="16">
 5         <u-col span="3">
 6             <view>
 7                 <u-image width="150rpx" height="150rpx"  :src="item.newsImgUrl" class="u-flex-nowrap" @tap="MyClick(item.title)">
 8                 </u-image>
 9             </view>
10         </u-col>
11         <u-col span="9">
12             <view class="info_title u-line-1 u-text-left u-col-top">{{item.title}}</view>
13             <view class="info_content u-line-2 u-text-left u-col-top">{{item.description}}</view>
14             <view class="info_date u-text-right u-col-top">{{item.newsDate}}</view>
15         </u-col>
16     </u-row>  
17     </navigator>
18 </template>

 父组件页面：直接引入子组件<news-list >

<view class="u-margin-10 info" v-for="item in newslist"> 
    <news-list   ></news-list>
</view> 

组件进行封装后，需要对子组件绑定数据，涉及到父子组件传值的问题，uniapp中沿用vue的方式   父传子：props 1）news-list.vue 在子组件中定义接收参数：

2）news-list.vue 在子组件上添加引用

3）在父组件上传递参数

  子传父：$emit 1）在子组件中定义事件

其中，“changes”是父组件方法名，"e"是传递的值 2）在子组件中触发事件

3）在父组件中添加在子组件中$emit定义的方法名，以及接收方法

其中“changes”和上一步方法名称一致，“childClick”是接收方法，接收子组件的传值

 

 

  最终效果如下，点击子组件的图像，在列表头部显示对应的title 点击前：

 

 

点击后：

 

 

  总结： 父传子：props, 子传父：$emit   以上，仅用于总结和学习！