文章目錄

• 概述
• 實現過程
• • Step1: 父組件設置Button按鈕
  • Step2: 這里使用了showHandlerFlag來控制子組件是否顯示，所里需要在data中定義下這個變量
  • Step3: 引用聲明組件
  • Step4:使用v-if條件渲染控制是否顯示子組件
  • Step5: 子組件
• 子組件代碼

概述

需求：需要在先有的頁面上增加一個“查看處理人”的按鈕，點擊查看處理人，彈出子組件，將參數傳遞給子組件，初始化的時候created方法中發送請求到后臺，接收到后臺返回的JSON數據后，解析JSON展示到頁面上。

下面的描述可能不正確，剛接觸Vue2.x ，請多見諒

---

實現過程

使用的組件庫是iView2.x版本。

---

Step1: 父組件設置Button按鈕

---

Step2: 這里使用了showHandlerFlag來控制子組件是否顯示，所里需要在data中定義下這個變量

data可以理解為存放本Vue組件中使用的變量的地方

https://cn.vuejs.org/v2/api/#data

---

Step3: 引用聲明組件

先import ,然后再component中定義import的組件。

上圖還有個props ,可以理解為存放外部傳遞過來的參數的地方。

https://cn.vuejs.org/v2/api/#props

---

Step4:使用v-if條件渲染控制是否顯示子組件

https://cn.vuejs.org/v2/api/#v-if

---

Step5: 子組件

使用template 作為根節點，承載頁面

https://cn.vuejs.org/v2/api/#template

緊接著：

然后在created方法中初始化數據

最后

methods中對應自定義的方法，close方法使用$emit將關閉事件拋給父Vue.

后臺返回的JSON數據如下，格式還是這個格式，下面截圖的數據已經改變

{"code":0,"msg":"success","data":{"sjsh":"審核設計","sjshHandlers":["集團錢工","集團管理員"],"csjggd":"傳輸竣工歸檔","csjggdHandlers":["集團錢工","集團管理員"],"sdsg":"省端施工","sdsgHandlers":[{"四川省":["集團管理員","上海市李工"]},{"云南省":["集團管理員","江蘇省劉工"]}]}}

---

子組件代碼

<template><div class="edit-user-role common-center-popover"><div class="mask common-mask"></div><div class="container"><div class="header"><div class="title"><span>環節處理人</span><i @click="close" class="iconfont icon-close"></i></div></div><div style="margin-top: 10px"><Table stripe :columns="columns1" :data="data1"></Table></div><div class="footer"><Button type="primary" @click="close">確定</Button></div></div></div> </template><script> import { localAxios } from '@/utils/common/HttpUtil' export default {components: {},props: {flowId: {type: String,default: ''}},// 初始化數據created () {localAxios.post('circuitworkflow/v1/workflow/circuit/queryCircuitAssignees/' + this.flowId).then(response => {if (response.data.code === 0 && response.data.data) {this.info = response.data.datathis.data1 = []// 遍歷let obj = {}this.data1.push(obj)obj['tacheName'] = this.info.sjshobj['prov'] = ''obj['assignee'] = this.info.sjshHandlers.toString()let obj1 = {}this.data1.push(obj1)obj1['tacheName'] = this.info.csjggdobj1['prov'] = ''obj1['assignee'] = this.info.csjggdHandlers.toString()this.info.sdsgHandlers.forEach(sdsgItem => {let obj2 = {}this.data1.push(obj2)obj2['tacheName'] = this.info.sdsgfor (let pro in sdsgItem) {obj2['prov'] = proobj2['assignee'] = sdsgItem[pro].toString()}})}})},data () {return {columns1: [{title: '環節名稱',key: 'tacheName'},{title: '處理省份',key: 'prov'},{title: '處理人',key: 'assignee'}],data1: [// {// tacheName: '初始數據',// prov: '初始數據',// assignee: '初始數據'// }]}},methods: {close () {this.$emit('close')}} } </script> <style lang="less" scoped> @deep: ~">>>"; .specialBtn {margin-left: 30px;background: #cadfff;color: #3586ff; } .uploadFileBtn {margin-left: 0;border-color: #2d8cf0; } .ivu-form-item {margin-bottom: 5px;vertical-align: top;zoom: 1; } .edit-user-role {z-index: 100;.container {width: 800px;height: 630px;z-index: 1;background: #fff;border-radius: 4px;position: relative;display: flex;flex-direction: column;.header {background: #4285f4;flex: 0 0 50px;line-height: 50px;border-radius: 4px 4px 0 0;.title {color: #fff;font-size: 14px;text-align: center;padding: 0 14px;& > span {/*float: left;*/font-size: 16px;}.icon-close {cursor: pointer;float: right;font-size: 14px;}}}.content {flex: 1;display: flex;.select-roles {display: inline-block;flex: 1;overflow: auto;.title {line-height: 40px;padding-left: 20px;font-size: 14px;background: rgba(241, 244, 249, 0.3);}}.optional-roles {border-right: 1px solid #ebeef5;.checkbox {margin-left: 20px;& @{deep} .ivu-checkbox-group-item {width: 113px;line-height: 25px;}.selected-all {margin: 10px 0;}}}.arrow {flex: 0 0 40px;display: flex;justify-content: center;align-items: center;color: RGBA(232, 232, 232, 0.6);}.selected-roles {border-left: 1px solid #ebeef5;.selected-role-item {width: 120px;line-height: 28px;background: rgba(241, 244, 249, 0.6);border-radius: 4px;display: inline-block;font-size: 12px;padding: 0 8px;margin: 5px 0 5px 13px;.delete-btn {color: #c0ccda;float: right;cursor: pointer;.iconfont {font-size: 12px;}}}}}.footer {position: absolute;top: 585px;flex: 0 0 45px;width: 100%;line-height: 45px;background: #fafafa;border-radius: 0 0 4px 4px;text-align: center;.buttons {float: right;margin-right: 15px;button {width: 90px;}}}} }.common-center-popover {position: fixed;top: 0;bottom: 0;left: 0;right: 0;margin: auto;display: flex;justify-content: center;align-items: center;.common-mask {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: #ccc;opacity: 0.4;}.ivu-tabs {color: #1f2d3d;}.span1 {display: inline-block;overflow: hidden;height: 32px;line-height: 32px;}.span2 {display: inline-block;overflow: hidden;height: 32px;line-height: 32px;} } </style>

總結

以上是生活随笔為你收集整理的Vue2.x-01点击按钮弹出子Vue组件，遍历JSON展示数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。