父子元件傳值

2021-10-23 14:55:50 字數 1126 閱讀 9688

父元件的data中定義值

用import引入子元件

在components中注入子元件

(父元件對子元件呼叫、註冊、引用)

import list from '../components/common/list.vue'

export default }},

// 註冊 hello 元件

components:

}

在父元件中定義乙個指令:message=「msg」 (message名稱需要和子元件中的props保持一致,msg是要傳遞給子元件的資料)

>

>

>

>

>

:message

="msg"

:name

="name"

:user

="user"

>

list

>

>

router-view

>

div>

template

>

在子元件中定義props屬性,msg的type可以自定義型別(但是必須和父元件中的資料型別一致,否則會報錯),default是預設值。

子元件中:

>

>

} }p

>

template

>

export default

}}

this.$emit(「元件方法名」,「傳遞給父元件的資料」) ,

(子元件用乙個事件觸發$emit方法,父元件中用childfn方法接收子元件中的資料;message是傳遞給父元件的資料)

父元件呼叫、註冊、引用子元件

父元件通過子元件規定的事件名來建立乙個函式,並接收子元件傳遞的資料。

<

!-- 父元件 -->

"test"

>

"parentfn"

>

子元件傳來的值 :

}

父子元件傳值

因為啊,今天在寫 的時候遇到坑,自己發現元件傳值有點不熟悉了,以前寫過,但是都是照著文件寫的。然後今天按照記憶寫,發現自己有點忘了。究其緣由,我覺的還是自己對於父子元件傳值的理解不夠深入。首先vue2.0規定了元件傳值是單向的,父元件傳值給子元件,方法是利用繫結屬性的方式,子元件通過props接受,...

父子元件傳值

第一種 前提 在父元件中引入子元件,並且宣告標籤對 ps 這中方法只能當子元件中的 v if true 時才可以 父元件主動獲取子元件值或者方法 this.refs.屬性 this.refs.方法 子元件主動獲取父元件值或者方法 this.parent.資料 this.parent.方法 第二種 路...

父子元件傳值

一 現在開發模式遇到的問題 問題 現在vue的專案,開發模式有乙個大的缺陷 原生的vue專案的目錄如下 1.assets 存放靜態檔案,2.components 非頁面級元件 3.page 存放頁面姐元件 4.router 存放 路由介面 5.index.html 進行控制根節點頁面顯示。缺陷是什麼...