鍍金池/ 問(wèn)答/HTML/ Vue.js中多個(gè)兄弟組件中如何共用一個(gè)公共的組件？

Vue.js中多個(gè)兄弟組件中如何共用一個(gè)公共的組件？

【問(wèn)題】：請(qǐng)問(wèn)下多個(gè)兄弟組件中如何共用一個(gè)公共的組件？
【描述】：進(jìn)入我的網(wǎng)站，根據(jù)路由不同，對(duì)應(yīng)不同的組件（后面統(tǒng)稱(chēng)組件1），在這些組件中，又有公共的部分（后面統(tǒng)稱(chēng)組件2），但是在公共部分中，里面的某些數(shù)據(jù)，我需要根據(jù)組件1中傳不同的數(shù)據(jù)，這個(gè)要怎么實(shí)現(xiàn)？
【效果】：

clipboard.png

clipboard.png

比如在上面圖1的這個(gè)頂部，這個(gè)標(biāo)題和按鈕中的text,我都希望根據(jù)組件1來(lái)傳遞。
【業(yè)務(wù)】：用戶首頁(yè)點(diǎn)擊圖2中的用戶信息，跳轉(zhuǎn)進(jìn)入圖2(用戶詳情界面)，其他有些模塊類(lèi)似。
【代碼】：

...
{ //圖2 router
    path: '/user', 
    name: 'User', 
    meta: { ... }, 
    components: { 
        default: User, 
        footer: Footer 
    } 
}, {  //圖1 router
    path: '/user/detail', 
    name: 'UserDetail', 
    meta: { ... }, 
    component: UserDetail
    //components: { 
        //default: UserDetail, 
        //header: Header  //圖2中頂部公共組件
     //} 
}
...

個(gè)人想用vue-router中的children來(lái)實(shí)現(xiàn)，但是發(fā)現(xiàn)好像不能這么做
剛?cè)肟硬痪?，?qǐng)問(wèn)下大神們要怎么實(shí)現(xiàn)？給個(gè)思路就可以了，問(wèn)題有點(diǎn)小白，不喜勿噴，謝謝！

回答
編輯回答
汐顏

將你想要復(fù)用的部分單獨(dú)封裝在一個(gè)vue文件里面，通過(guò)props或者vuex來(lái)進(jìn)行state控制。
組件化開(kāi)發(fā)是現(xiàn)在前端非常重要的思想，建議學(xué)習(xí)。

2018年6月25日 11:42
編輯回答
幼梔

建議你單獨(dú)定義一個(gè)vue組件
通過(guò)父子組件傳值控制顯示內(nèi)容
在需要的頁(yè)面導(dǎo)入組件就好
上面的方法可以，但是局限性太大

2018年9月19日 02:30
編輯回答
臭榴蓮

我知道一個(gè)方法是在index.js中用

Vue.component('header-item', {
  props: ['message', 'backUrl'],
  template: `...`
})

在其他頁(yè)面中用

<header-item message="我是demo1頭部" backUrl="/"></header-item>

但是有沒(méi)有其他的方法？一般在公司實(shí)戰(zhàn)項(xiàng)目中采用的方法是什么？

方法二：
1、定義一個(gè)單獨(dú)的header.vue公共組件
代碼如下：（采用了iView）

<template>
    <Layout>
        <Header>
            {{title}}
        </Header>
    </Layout>
</template>
<script>
    export default{
        props: ['title'],
        data () {
            return { }
        }
    }
</script>

2、在vue-router/index.js中根據(jù)需要引入。代碼如下：

import Header from '**/Header'
...
{
  path: '/user/detail',
  name: 'Detail',
  meta: {...},
  components: {
    default: Detail,
    header: Header
  },
  props: {
    header: {
      title: '用戶信息'
    }
  }
},
...

3、頁(yè)面中引用。代碼如下：

<router-view name="header"></router-view>
2017年7月23日 10:19