Vue元件化之父子元件

2021-10-17 09:29:43 字數 1208 閱讀 8728

在父元件裡使用子元件時,父元件的模板最外層一定要有div塊

元件內部是無法訪問vm例項裡的data資料的,元件有自己的儲存資料的位置。

元件也有data、methods、生命週期函式等屬性,但data必須是乙個函式且返回的是乙個物件,物件內部儲存著資料。

為什麼元件裡的data必須是函式形式?

當重複使用元件時,如:

>

>

>

>

>

>

>

div>

這三個cpn相當於三個元件例項,都會呼叫元件裡的data,如果data是物件,那麼三個例項傳進的是位址,相當於三個例項引用同乙個data。

如果data是函式,那麼cpn在呼叫data時,會執行函式返回新的物件,以防止改變乙個例項其他跟著改變。

父傳子用props

在子元件中新增props屬性,裡面存放來自父元件的資料。

props裡命名慎用駝峰標識,如cmessage動態繫結時需改為v-bind:c-message=""

"movies"

:cmessage=

"message"

>

<

/cpn>

vue.

component

('cpn',}

})

子傳父用自定義事件

在子元件的方法中用emit觸發在父元件標籤裡的自定義事件(這個事件是父元件裡自定義的事件)

父元件自定義事件響應的函式傳參問題很奇怪

>

"faclick"

>

<

/cpn>

//itemclick即自定義事件

<

/div>

"cpnc"

>

//此id避免與註冊的標籤名相同

for=

"item in movies" @click=

"btnclick(item)"

>

}<

/button>

//<

/div>

<

/template>

子元件}}

父元件}}

<

/script>

Vue之父子元件值傳遞

這裡用乙個 例項來解釋一下 子元件向父元件傳值 learn vuetitle src vue.js script window.onload function methods components methods template components methods template conten...

Vue 之父子元件間的通訊

兄弟元件間傳值 一覽圖 1 靜態傳值 1 在父元件中 在子元件佔位符中直接寫 引數名 引數值 father this is father h1 靜態 父傳子 字串 msg from father.div template 引入子元件,必須 import child from components c...

Vue學習之父子元件傳參

文章目錄 隱藏 這幾天在學習 vue 的時候,學習了 vue 元件的父子元件,父子元件顯得尤為重要。新建乙個子元件 components template methods 使用元件 my title title send data handleclick 父元件向子元件傳參方式 v bind 和屬性...