标签：UniApp vue 封装 在子 入门教程 list item 组件

上一节对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   以上，仅用于总结和学习！

标签：UniApp,vue,封装,在子,入门教程,list,item,组件
来源： https://www.cnblogs.com/ywkcode/p/15720813.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。