vue子元件父元件props傳參示例

2021-10-20 19:12:18 字數 2446 閱讀 9703

子元件

// 通過id拼接url

" }"

>}:

}<

/router-link>

<

/div>

<

/template>

export

default

;<

/script>

<

/style>

父元件

//

// for迴圈遍歷

v-for=

"item in movieitems"

:key=

"item._id"

// 父元件回傳子元件需要的引數資料

:moviename=

"item.moviename"

:_id=

"item._id"

:movietime=

"item.movietime"

>

<

/movie-list>

<

/div>

<

/div>

<

/template>

// 引入子元件

import movielist from

"../components/movielist"

;import axios from

"axios"

;export

default

,created()

);},

data()

;},}

;<

/script>

<

/style>

子元件

}<

/div>

"fromusername"

>來自

}<

/div>

"tousername"

>傳送給

}<

/div>

}<

/div>

<

/div>

<

/template>

export

default

;<

/script>

<

/style>

父元件

收件箱<

/h1>

// for迴圈遍歷

v-for=

"item in receivemail"

:key=

"item._id"

// 父元件回傳子元件需要的引數資料

:title=

"item.title"

:content=

"item.content"

:fromusername=

"item.fromusername"

:time=

"item.time"

>

<

/email-list>

<

/div>

發件箱<

/h1>

v-for=

"item in sendmail"

:key=

"item._id"

:title=

"item.tile"

:content=

"item.content"

:tousername=

"item.tousername"

time=

"item.time"

>

<

/email-list>

<

/div>

<

/div>

<

/template>

// 引入子元件

import emaillist from

"../components/emaillist"

;import axios from

"axios"

;export

default

,created()

).then

((data)

=>);

// 發件

Vue解決子元件修改父元件props引數不可逆問題

直接賦值props裡面資料會導致如下錯誤 解決這個bug有以下兩種方法,一 使用 emit函式 1 父元件可以使用 props 把資料傳給子元件。2 子元件可以使用 emit 觸發父元件的自定義事件 修改後 父元件 html methods methods 子元件 this.emit showsub...

父元件與子元件之間的傳值 props

父元件與子元件之間的傳值 在實際專案中,我們會遇到很多導航欄.若將這麼多的tab欄寫在乙個頁面,會很麻煩,也會很複雜.那麼,我們怎樣做呢?1.在主頁面中可以用switchtab去定義好li標籤 2.在data中定義tabname 可以為空值,也可以初始化乙個值 tabname 最好有乙個預設的值,可...

vue子元件向父元件傳值。

1 子,父元件相互傳值。話不多說直接上 父元件向子元件傳值就是通過子元件定義的props 子元件 父元件 import modal from components common modal modal.vue import timecontrol from components common tim...