Vue.js中多个兄弟组件中如何共用一个公共的组件？

Question

 

【问题】：请问下多个兄弟组件中如何共用一个公共的组件？
【描述】：进入我的网站，根据路由不同，对应不同的组件（后面统称组件1），在这些组件中，又有公共的部分（后面统称组件2），但是在公共部分中，里面的某些数据，我需要根据组件1中传不同的数据，这个要怎么实现？
【效果】：

比如在上面图1的这个顶部，这个标题和按钮中的text,我都希望根据组件1来传递。
【业务】：用户首页点击图2中的用户信息，跳转进入图2(用户详情界面)，其他有些模块类似。
【代码】：

...
{ //图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中顶部公共组件
     //} }
...

个人想用vue-router中的children来实现，但是发现好像不能这么做
刚入坑不久，请问下大神们要怎么实现？给个思路就可以了，问题有点小白，不喜勿喷，谢谢！

Answer 1

我知道一个方法是在index.js中用Vue.component('header-item',&nbsp;{ &nbsp;&nbsp;props:&nbsp;['message',&nbsp;'backUrl'], &nbsp;&nbsp;template:&nbsp;`...` })在其他页面中用<header-item&nbsp;message="我是demo1头部"&nbsp;backUrl="/"></header-item>但是有没有其他的方法？一般在公司实战项目中采用的方法是什么？方法二：1、定义一个单独的header.vue公共组件代码如下：（采用了iView）<template> &nbsp;&nbsp;&nbsp;&nbsp;<Layout> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<Header> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{title}} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</Header> &nbsp;&nbsp;&nbsp;&nbsp;</Layout></template><script> &nbsp;&nbsp;&nbsp;&nbsp;export&nbsp;default{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;props:&nbsp;['title'], &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data&nbsp;()&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;{&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;}</script>2、在vue-router/index.js中根据需要引入。代码如下：import&nbsp;Header&nbsp;from&nbsp;'**/Header'...{ &nbsp;&nbsp;path:&nbsp;'/user/detail', &nbsp;&nbsp;name:&nbsp;'Detail', &nbsp;&nbsp;meta:&nbsp;{...}, &nbsp;&nbsp;components:&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;default:&nbsp;Detail,&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;header:&nbsp;Header &nbsp;&nbsp;}, &nbsp;&nbsp;props:&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;header:&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;title:&nbsp;'用户信息' &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;} },...3、页面中引用。代码如下：<router-view&nbsp;name="header"></router-view>

Answer 2

将你想要复用的部分单独封装在一个vue文件里面，通过props或者vuex来进行state控制。组件化开发是现在前端非常重要的思想，建议学习。

Answer 3

建议你单独定义一个vue组件通过父子组件传值控制显示内容在需要的页面导入组件就好上面的方法可以，但是局限性太大