vue的組件化思想：java中，我們常常將共用部分放入一個單獨的類中，并稱它們為工具類，這樣不僅可以減少代碼的冗余，并且在維護上也大大提高了效率。當然，在vue中也有類似的處理，就是組件（Component）；組件是vue最強大的功能之一，可用來封裝重用的代碼。

哪些場景適合

如訂單有多種狀態，使用標簽頁，每一頁查詢一種訂單狀態的數據，顯示數據的表格卻是一樣的，這時就可以用到組件來封裝共同的表格部分了。

vue 代碼

父組件 - 逐個分析

? 1. 父組件 - Tabs 標簽頁

<el-tabs style='margin-top:15px;' v-model="activeNameChild" @tab-click="handleClick"><el-tab-pane v-for="(item,index) in tabMapOptionsChild" :label="item.label" :key='item.type' :name="item.type"><keep-alive><orderChild :type="item.type"></orderChild></keep-alive></el-tab-pane> </el-tabs>

?頁面主要內容就是兩個Tabs 標簽頁（演示兩種不同引入子組件的方式）

• <el-tabs> -> v-model：當前選擇 tab-pane 頁的name 屬性值，通常用來指定頁面加載時 Tabs 標簽頁的默認選擇
• <el-tabs> -> @tab-click：tab 被選中時觸發的方法
• <el-tab-pane>：每個單獨的選項卡，這里使用 v-for 遍歷循環出多個選項卡
• <el-tab-pane> -> label：選項卡標題（顯示在頁面上的文字）
• <el-tab-pane> -> name：與選項卡 activeName 對應的標識符，表示選項卡別名（隱藏的文字）
• <keep-alive>：是Vue的內置組件，能在組件切換過程中將狀態保留在內存中，防止重復渲染DOM
• <orderChild>：引入子組件
• <orderChild> ->?type：傳值到子組件中

? 2. 父組件 - 引入子組件

// 引入子組件 import child from './components/child' import son from './components/son'

? 3. 父組件 - 輸出本模塊

export default {name : 'OrderParent',components : { orderChild:child,orderSon:son },data(){return {activeNameChild: 'daishenhe',activeNameSon: 'fukuanzhong',tabMapOptionsChild:[{label:'待審核',type:'daishenhe'},{label:'審核中',type:'shenhezhong'},{label:'已審核',type:'yishenhe'},{label:'其他'}],tabMapOptionsSon:[{label:'待付款',type:'daifukuan'},{label:'付款中',type:'fukuanzhong'},{label:'已付款',type:'yifukuan'},{label:'其他'}],}},created(){},mounted(){},methods:{// 點擊選擇標簽頁handleClick(tab, event) {// 如果點擊了待審核頁 觸發的方法if(tab.name === 'daishenhe'){}},} }

• ?name：全局ID，提供更好的調試信息
• components：組件，key - value 形式，key 在頁面中引入組件時需要，value 是在 import 中引入的組件
• data：全局雙向綁定的數據
• data ->?activeNameChild/activeNameSon ：Tabs 標簽頁 加載顯示的選項卡
• data ->?tabMapOptionsChild/tabMapOptionsSon：選項卡集合
• methods：方法
• methods ->?handleClick：點擊選項卡后觸發的事件

父組件的連貫代碼?

<template><div class="tab-container"><el-tabs style='margin-top:15px;' v-model="activeNameChild" @tab-click="handleClick"><el-tab-pane v-for="(item,index) in tabMapOptionsChild" :label="item.label" :key='item.type' :name="item.type"><keep-alive><orderChild :type="item.type"></orderChild></keep-alive></el-tab-pane></el-tabs><el-tabs style='margin-top:15px;' v-model="activeNameSon" @tab-click="handleClick"><el-tab-pane v-for="(item,index) in tabMapOptionsSon" :label="item.label" :key='item.type' :name="item.type"><keep-alive><order-son :type="item.type"></order-son></keep-alive></el-tab-pane></el-tabs></div> </template><script> // 引入子組件 import child from './components/child' import son from './components/son' export default {name : 'OrderParent',components : { orderChild:child,orderSon:son },data(){return {activeNameChild: 'daishenhe',activeNameSon: 'fukuanzhong',tabMapOptionsChild:[{label:'待審核',type:'daishenhe'},{label:'審核中',type:'shenhezhong'},{label:'已審核',type:'yishenhe'},{label:'其他'}],tabMapOptionsSon:[{label:'待付款',type:'daifukuan'},{label:'付款中',type:'fukuanzhong'},{label:'已付款',type:'yifukuan'},{label:'其他'}],}},created(){},mounted(){},methods:{// 點擊選擇標簽頁handleClick(tab, event) {// 如果點擊了待審核頁 觸發的方法if(tab.name === 'daishenhe'){}},} } </script><style>.tab-container{margin: 0 15px;} </style>

• 分別引入了子組件 child 和子組件 son
• 兩種引入方式

①? <orderChild> ：在?components 中定義的 key 名稱為 orderChild 的組件，引入的是 child 子組件

②? <order-son>? ：在 components 中定義的 key 名稱為?orderSon 的組件，引入的是 son 子組件

駝峰式命名法中從第二個單詞開始后面的單詞的首字母小寫并在前面加一個連接符號

• 兩個 Tabs 標簽頁分別代表著 審核狀態 和 付款狀態（data ->?tabMapOptionsChild/tabMapOptionsSon）
• 每一個標簽頁的選項卡都有四項，前三項都有兩個屬性，最后一項只有一個屬性（為了體現子組件中取不到值時顯示設置的默認值）
• 在 <orderChild> ?和 <order-son> 處顯示子組件的內容，用 :type 設置傳入到子組件中的值（傳入的 key 是自定義的，如此處的 key 為 type）

子組件 - 逐個分析（兩個子組件除了文件名和全局ID外內容基本一致）

? 1. 子組件 - 顯示的內容

{{type}}

? 2. 子組件 - 輸出本模塊

export default {name: 'OrderChild',props : {type: {type:String,default:'OrderChild'}},data(){return{}},created(){console.log(this.type);},activated() {},mounted(){}, }

• name：全局ID，提供更好的調試信息
• props：獲取父組件傳入的屬性（最好設置屬性的類型和默認值）
• props ->?type：在父組件中引入本組件時，設置的 :type 屬性
• 在 本組件的方法中調用父組件傳入的值時使用 this.key 的方式，如?created() 方法，在頁面加載結束后打印父組件傳入進來的值
• 在 本組件的頁面中調用父組件傳入的值時使用 {{key}} 的方式，如顯示的內容區中 {{type}}，在頁面中顯示父組件傳入進來的值

子組件的連貫代碼 - child

<template><div>{{type}}</div> </template><script> export default {name: 'OrderChild',props : {type: {type:String,default:'OrderChild'}},data(){return{}},created(){console.log(this.type);},activated() {},mounted(){}, } </script><style></style>

?子組件的連貫代碼 - son

<template><div>{{type}}</div> </template><script> export default {name: 'OrderSon',props : {type: {type:String,default:'OrderSon'}},data(){return{}},created(){console.log(this.type);},activated() {},mounted(){}, } </script><style></style>

效果圖

• 每一個標簽頁的選項卡都有四項
• 前三項都有兩個屬性，最后一項只有一個屬性（為了體現子組件中取不到值時顯示設置的默認值）

?

歡迎來訪我的vue專欄總篇博客??

?

希望能夠幫助到你

over

?

?

?

總結

以上是生活随笔為你收集整理的在vue中实现父组件调用子组件以及传值的全部內容，希望文章能夠幫你解決所遇到的問題。

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