第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機(jī)立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

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

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

紅顏莎娜 2018-07-11 20:14:55
 【問題】:請問下多個兄弟組件中如何共用一個公共的組件?【描述】:進(jìn)入我的網(wǎng)站,根據(jù)路由不同,對應(yīng)不同的組件(后面統(tǒng)稱組件1),在這些組件中,又有公共的部分(后面統(tǒng)稱組件2),但是在公共部分中,里面的某些數(shù)據(jù),我需要根據(jù)組件1中傳不同的數(shù)據(jù),這個要怎么實(shí)現(xiàn)?【效果】:比如在上面圖1的這個頂部,這個標(biāo)題和按鈕中的text,我都希望根據(jù)組件1來傳遞。【業(yè)務(wù)】:用戶首頁點(diǎn)擊圖2中的用戶信息,跳轉(zhuǎn)進(jìn)入圖2(用戶詳情界面),其他有些模塊類似?!敬a】:... { //圖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來實(shí)現(xiàn),但是發(fā)現(xiàn)好像不能這么做剛?cè)肟硬痪茫垎栂麓笊駛円趺磳?shí)現(xiàn)?給個思路就可以了,問題有點(diǎn)小白,不喜勿噴,謝謝!
查看完整描述

3 回答

?
一只甜甜圈

TA貢獻(xiàn)1836條經(jīng)驗(yàn) 獲得超5個贊

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

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

在其他頁面中用

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

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

方法二:
1、定義一個單獨(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、頁面中引用。代碼如下:

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


查看完整回答
反對 回復(fù) 2018-07-15
?
慕容3067478

TA貢獻(xiàn)1773條經(jīng)驗(yàn) 獲得超3個贊

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

查看完整回答
反對 回復(fù) 2018-07-15
?
千萬里不及你

TA貢獻(xiàn)1784條經(jīng)驗(yàn) 獲得超9個贊

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

查看完整回答
反對 回復(fù) 2018-07-15
  • 3 回答
  • 0 關(guān)注
  • 2729 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號