vue元件傳值的三種方式

2021-10-16 18:07:06 字數 1647 閱讀 8017

非父子元件傳值:(一種傳值:$emit)

(1) 父元件給子元件傳值:父元件繫結動態屬性傳值 / 傳方法 / 傳例項

(2) 子元件通過props 接收父元件傳過來的值 / 方法 / 父親例項

props: ,

methods: ,

//執行父元件方法也可直接呼叫;執行

}

特:如果子元件和父元件傳值的props和data中定義的重複則會衝突,都有的時候會用props的!!
示例:

(1)父呼叫子元件的時候定義乙個ref;

(2)父元件主動獲取子元件的資料和方法

1:呼叫子元件的時候定義乙個ref;

2:在父元件拿到子元件的內容/方法通過

`this.$refs.header.屬性

this.$refs.header.方法`

getson()

, fatherfunction(item)

,

(3)子元件主動獲取父元件的資料和方法

1:呼叫子元件的時候定義乙個ref;

2:在子元件拿到父元件的內容/方法

`this.$parent.資料

this.$parent.方法`

getfather()

, son()

,

示例:

(1):新建乙個js檔案,例:vueevent.js 引入vue 例項化vue 暴露這個例項

import vue from 'vue'

;var vueevent

=new vue(

);//新建這個例項

export default vueevent;//暴露這個例項

(2):在需要廣播的地方引入這個例項

import vueevent from "../model/vueevent.js"

;

(3):接收傳送資料:

傳送: 通過vueevent.$emit(名,資料)
vueevent.$emit

("to-home", this.msg)

;

接收: 通過vueevent.$on(名,方法)
vueevent.$on

("to-home", (data)

=>

);

示例:

vue vue元件傳值的三種方式

vue的元件傳值分為三種方式 父傳子 子傳父 非父子元件傳值 引用官網的一句話 父子元件的關係可以總結為 prop 向下傳遞,事件向上傳遞 父元件通過 prop 給子元件下發資料,子元件通過事件給父元件傳送訊息,如下圖所示 下面我們就開始用 一言不合就上 詳細的介紹vue元件傳值的三種方式 子元件的...

vue元件傳值的三種方式,文本版解釋

父傳子 當子元件子父元件中當標籤使用的時候,給子元件新增乙個自定義屬性,值為需要傳遞的值 如 並在data中宣告 然後在子元件中通過props接收,接收時,用屬性名接收 如 props parenttochild 子傳父 法一 當子元件在父元件中當標籤使用的時候,給子元件新增乙個自定義方法 如 父元...

Vue路由傳值的三種方式

1 動態路由 1 在定義路由的時候通過 屬性 屬性 來定義傳遞的屬性 例如 path detail id name 2 在路由跳轉的時候通過 值 值將當前頁面的資料傳遞到對應跳轉的元件中去 例如 3 跳轉到指定頁面,在created中通過this.route.params進行接收 let this....