已解決430363個問題，去搜搜看，總會有你想問的

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

首頁猿問 Vue.js中多個兄弟組件中如何共...

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

紅顏莎娜 2018-07-11 20:14:55

【問題】：請問下多個兄弟組件中如何共用一個公共的組件？【描述】：進入我的網站，根據路由不同，對應不同的組件（后面統稱組件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來實現，但是發現好像不能這么做剛入坑不久，請問下大神們要怎么實現？給個思路就可以了，問題有點小白，不喜勿噴，謝謝！

查看完整描述

3 回答

一只甜甜圈

TA貢獻1836條經驗獲得超5個贊

我知道一個方法是在index.js中用

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

在其他頁面中用

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

但是有沒有其他的方法？一般在公司實戰項目中采用的方法是什么？

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

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

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

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

3、頁面中引用。代碼如下：

<router-view name="header"></router-view>

反對回復 2018-07-15

慕容3067478

TA貢獻1773條經驗獲得超3個贊

將你想要復用的部分單獨封裝在一個vue文件里面，通過props或者vuex來進行state控制。
組件化開發是現在前端非常重要的思想，建議學習。

反對回復 2018-07-15

千萬里不及你

TA貢獻1784條經驗獲得超9個贊

建議你單獨定義一個vue組件
通過父子組件傳值控制顯示內容
在需要的頁面導入組件就好
上面的方法可以，但是局限性太大

反對回復 2018-07-15

慕妹0623414
局限性太大那要怎么辦

回復 2018-08-29

3 回答
0 關注
2736 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

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

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

3 回答

添加回答