Vue 組件通信詳解

mikasa 發布于2019-08-23 18:07 / 1847人閱讀

摘要：父子組件通信兄弟組件通信跨級組件通信父傳子子組件用接收，父組件用發送父組件紅樓夢西游記三國演義水滸傳子組件子傳父子組件用有的版本名稱只能小寫發送，父組件自定義事件然后在方法中接收父組件不能加括號子組件點擊把傳給父組件可以傳

父子組件通信： props、 $parent / $children、 provide / inject 、 ref 、  $attrs / $listeners
兄弟組件通信：EventBus 、 Vuex
跨級組件通信: EventBus 、 Vuex 、 provide / inject 、 $attrs / $listeners

父傳子 子組件用 props 接收，父組件用 v-bind:prop 發送
父組件


子組件




子傳父 子組件用 v-on:click="" this.$emit("name", this.msg)（【有的版本名稱只能小寫】）發送，父組件自定義事件 v-on:name="getChildValue" 然后在 getChildValue(data){} 方法中接收
父組件


子組件





父子傳參還可以用 $parent（對象）和 $children（數組）


provide / reject （上傳下）
父輩組件中通過 provide 來提供變量，子孫組件中通過 reject 來注入變量。
父組件


子組件


孫組件




ref
如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子組件上，引用就指向組件實例，可以通過實例直接調用組件的方法或訪問數據 ref="xx" this.$refs.xx

eventBus（事件總線，項目較大難以維護，組件都可以傳） $emit(name, data)發送 $on(name, data=>{})接收 【名稱小寫】
event-bus.js
import Vue from "vue"
export const EventBus = new Vue()

com1.vue 發送事件

import {EventBus} from "./event-bus.js"
data(){
  return {num: 1}
},
additionHandle(){
  EventBus.$emit("addition", {num: this.num++}
)

com2.vue 接收事件
計算和: {{count}}
data() {
  return {count: 0}
},
mounted() {
  EventBus.$on("addition", param => {
    this.count = this.count + param.num;
  })
}


localStorage / sessionStorage
因為 window.loacalStorage.setItem(key, value)、window.loacalStorage.getItem(key) 儲存的是字符串，需要用 JSON.parse() / stringify() 轉換
可結合 vuex，實現數據持久保存和解決數據及狀態混亂問題


$attrs $listeners（僅僅是傳遞數據，而不做中間處理，使用 vuex 處理，未免有點大材小用）
test.vue



com1.vue



com2.vue

GPU云服務器云服務器 vue組件 vue組件開發 vue父子組件通訊 vue輪播組件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/104697.html

Vue.js-組件詳解

摘要：事件總線事件總線首先創建了一個名為的空的實例然后全局定義了組件最后創建了實例。在父組件模板中，子組件標簽上使用指定一個名稱，并在父組件內通過來訪問指定名稱的子組件。學習筆記：組件詳解組件詳解組件與復用 Vue組件需要注冊后才可以使用。注冊有全局注冊和局部注冊兩種方式。全局注冊 Vue.component(my-component, {}); 要在父實例中使用這個組件，必須要...

jeffrey_up 2019-08-23 16:02 評論0 收藏0
Vue-組件詳解

摘要：除了監聽事件外，還可以用于組件之間的自定義事件。它僅僅作為一個直接訪問子組件的應急方案，應當避免在模板或計算屬性中使用。將和合并成，會自動去判斷是普通標簽還是組件。子組件這里的狀態綁定的是父組件的數據。查看原文站點，更多擴展內容及更佳閱讀體驗！組件詳解組件與復用 Vue組件需要注冊后才可以使用。注冊有全局注冊和局部注冊兩種方式。全局注冊 Vue.component(my-com...

dadong 2019-08-26 12:00 評論0 收藏0
關于Vue2一些值得推薦的文章 -- 五、六月份

摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。五、六月份推薦集合查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。蘇...

sutaking 2019-08-02 15:17 評論0 收藏0
關于Vue2一些值得推薦的文章 -- 五、六月份

摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。五、六月份推薦集合查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。蘇...

khs1994 2019-08-23 18:08 評論0 收藏0