成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Vue 組件通信詳解

mikasa / 1850人閱讀

摘要：父子組件通信兄弟組件通信跨級(jí)組件通信父?jìng)髯幼咏M件用接收，父組件用發(fā)送父組件紅樓夢(mèng)西游記三國(guó)演義水滸傳子組件子傳父子組件用有的版本名稱只能小寫發(fā)送，父組件自定義事件然后在方法中接收父組件不能加括號(hào)子組件點(diǎn)擊把傳給父組件可以傳

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

父?jìng)髯?子組件用 props 接收，父組件用 v-bind:prop 發(fā)送
父組件


子組件




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


子組件





父子傳參還可以用 $parent（對(duì)象）和 $children（數(shù)組）


provide / reject （上傳下）
父輩組件中通過(guò) provide 來(lái)提供變量，子孫組件中通過(guò) reject 來(lái)注入變量。
父組件


子組件


孫組件




ref
如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子組件上，引用就指向組件實(shí)例，可以通過(guò)實(shí)例直接調(diào)用組件的方法或訪問(wèn)數(shù)據(jù) ref="xx" this.$refs.xx

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

com1.vue 發(fā)送事件

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

com2.vue 接收事件

計(jì)算和: {{count}}

data() {
  return {count: 0}
},
mounted() {
  EventBus.$on("addition", param => {
    this.count = this.count + param.num;
  })
}


localStorage / sessionStorage
因?yàn)?window.loacalStorage.setItem(key, value)、window.loacalStorage.getItem(key) 儲(chǔ)存的是字符串，需要用 JSON.parse() / stringify() 轉(zhuǎn)換
可結(jié)合 vuex，實(shí)現(xiàn)數(shù)據(jù)持久保存和解決數(shù)據(jù)及狀態(tài)混亂問(wèn)題


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



com1.vue



com2.vue

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/104697.html

相關(guān)文章

  • Vue.js-組件詳解

    摘要：事件總線事件總線首先創(chuàng)建了一個(gè)名為的空的實(shí)例然后全局定義了組件最后創(chuàng)建了實(shí)例。在父組件模板中，子組件標(biāo)簽上使用指定一個(gè)名稱，并在父組件內(nèi)通過(guò)來(lái)訪問(wèn)指定名稱的子組件。 學(xué)習(xí)筆記：組件詳解 組件詳解 組件與復(fù)用 Vue組件需要注冊(cè)后才可以使用。注冊(cè)有全局注冊(cè)和局部注冊(cè)兩種方式。 全局注冊(cè) Vue.component(my-component, {}); 要在父實(shí)例中使用這個(gè)組件，必須要...

    jeffrey_up 評(píng)論0 收藏0

  • Vue-組件詳解

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

    dadong 評(píng)論0 收藏0

  • 關(guān)于Vue2一些值得推薦的文章 -- 五、六月份

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

    sutaking 評(píng)論0 收藏0

  • 關(guān)于Vue2一些值得推薦的文章 -- 五、六月份

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

    khs1994 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

mikasa

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<