vue學習筆記 vue元件之間的值傳遞

2021-09-08 21:39:25 字數 1075 閱讀 6836

一:父子關係元件之間的值傳遞:

1:父元件主動呼叫子元件資料/方法

首先在父元件中使用子元件的元素中新增ref屬性,值可以自定義(eg:child);

然後在父元件中要用到子元件中的資料或者方法的地方使用如下方法呼叫子元件的資料/方法:

this.$refs.child.子元件中的屬性名         //呼叫/使用子元件中的資料

this.$refs.child.子元件中的方法名 //呼叫/使用子元件中的方法

到此在父元件中就可以呼叫子元件中的屬性/方法

2:子元件主動呼叫父元件資料方法

直接在子元件中使用如下js**使用父元件中的資料/方法

this.$parent.父元件中的屬性              //呼叫/使用父元件中的屬性

this.$parent.父元件中的方法 //呼叫/使用父元件中的方法

二:非父子元件之間的值傳遞

1:可以根據元件之間的父子關係實現非父子元件之間的值傳遞

2:事件廣播的方式實現非父子元件之間的值傳遞

(1)新建兩個元件home.vue和news.vue元件,分別在兩個元件中建立data屬性和方法

(2)在主元件中引入使用上面兩個元件

(3)建立乙個js檔案(vueevent.js)先引入vue模組,再建立乙個vue例項(eg:vueevent),最後把這個例項暴露出去

(4)在home/news元件中先引入(3)中建立的vue例項,然後使用如下方法廣播資料

vueevent.$emit('to-news',this.msg)       //'to-news' 這是乙個名稱,可以自定義

是把當前元件中的msg屬性廣播給其他元件

(5)在另外乙個元件中使用廣播的資料,首先在另乙個元件中也要引入(3)中建立的vue例項,然後在生命週期函式                            mounted函式中使用如下方法監聽廣播,並使用廣播的資料

mounted())

}

vue學習筆記 vue元件

元件 是頁面的一部分,將介面切分成部分,每部分稱為 元件 定義乙個全域性的元件,元件支援 駝峰命名 規則 vue.component todoitem 迴圈遍歷 list 每一次遍歷都把值給 item item 再通過 v bind 把值傳遞給 content compoent 通過 props 獲...

vue元件之間通訊

個人blog,歡迎關注加收藏 元件之間通訊的幾種方式 1.父向子傳資料 props 2.子向父傳資料 emit 3.兄弟元件傳資料 a.事件匯流排 bus 在父元件的data中bus new vue 建立 事件匯流排 b.傳遞資料 this.roo t.bu s.root.bus.root.b us...

Vue元件之間通訊

vue元件傳值有以下幾種情況 父元件向子元件傳值 子元件向父元件傳值 兄弟元件之間傳值等 一 父元件向子元件傳值 傳值方式 props 動態傳遞值 子元件son 靜態傳值 父元件 子元件 son 1 prop的大小寫 html中的attribute名對大小寫不敏感,所以prop中的駝峰值需要等價於短...