欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue數(shù)據(jù)傳遞--我有特殊的實(shí)現(xiàn)技巧

 更新時(shí)間:2018年03月20日 11:44:00   作者:toBeTheLight  
這篇文章主要介紹了vue數(shù)據(jù)傳遞一些特殊梳理技巧,需要的朋友可以參考下

前言

最近碰到了比較多的關(guān)于vue的eventBus的問(wèn)題,之前定技術(shù)選型的時(shí)候也被問(wèn)到了,vuex和eventBus的使用范圍。所以簡(jiǎn)單的寫一下。同時(shí)有一種特殊的實(shí)現(xiàn)方案。

有這么幾種數(shù)據(jù)傳遞方式,vuex、props、eventBus和特殊的eventBus。

vuex

不介紹,數(shù)據(jù)量和復(fù)雜度達(dá)不到不用它你才會(huì)向下看。

props

demo

父子組件傳值,官方api,只寫個(gè)demo。

1.父組件

<son :info="info" @update="updateHandler"/>
// data
info: 'sendToSon'
// methods
updateHandler (newVal) {
 this.info = newVal
}

2.子組件

// props
props: ['info']
// 向上傳值,某個(gè)方法中使用
this.$emit('update', 'got')

父向子傳值-->props 子向父?jìng)髦?->子組件綁定事件回調(diào)定義在父組件,子組件觸發(fā)此事件。 因不推薦子組件內(nèi)直接修改父組件傳入的props,需使用自定義事件。

限制

父子組件。

eventBus

demo

bus皆為導(dǎo)入的bus實(shí)例

// bus
const bus = new Vue()
// 數(shù)據(jù)接收組件
// 當(dāng)前組件接收值則
bus.$on('event1', (val)=>{})
// 數(shù)據(jù)發(fā)出組件
// 當(dāng)前組件發(fā)出值則
bus.$emit('event1', val)

可以看出本質(zhì)是一個(gè)vue實(shí)例充當(dāng)事件綁定的媒介。 在所有實(shí)例中使用其進(jìn)行數(shù)據(jù)的通信。

雙(多)方使用同名事件進(jìn)行溝通。

問(wèn)題

  1. $emit時(shí),必須已經(jīng) $on,否則將無(wú)法監(jiān)聽到事件,也就是說(shuō)對(duì)組件是有一定的同時(shí)存在的要求的。(注:路由切換時(shí),新路由組件先 created,舊路由組件再destoryed,部分情況可以分別寫入這兩個(gè)生命周期,見此問(wèn)題)。
  2. $on在組件銷毀后不會(huì)自動(dòng)解除綁定,若同一組件多次生成則會(huì)多次綁定事件,則會(huì)一次 $emit,多次響應(yīng),需額外處理。
  3. 數(shù)據(jù)非“長(zhǎng)效”數(shù)據(jù),無(wú)法保存,只在 $emit后生效。

所以是否有一種更適用的方案呢?

特殊的eventBus?

demo

我們先來(lái)看個(gè)代碼,線上代碼。 bus皆為導(dǎo)入的bus實(shí)例。

// bus
const bus = new Vue({
 data () {
  return {
   // 定義數(shù)據(jù)
   val1: ''
  }
 },
 created () {
  // 綁定監(jiān)聽
  this.$on('updateData1', (val)=>{
   this.val1 = val
  })
 }
})
// 數(shù)據(jù)發(fā)出組件
import bus from 'xx/bus'
// 觸發(fā)在bus中已經(jīng)綁定好的事件
bus.$emit('update1', '123')
// 數(shù)據(jù)接收組件

{{val1}}
// 使用computed接收數(shù)據(jù)
computed () {
 val1 () {
  // 依賴并返回bus中的val1
  return bus.val1
 }
}

不同

  1. 正統(tǒng)的eventBus只是用來(lái)綁定和觸發(fā)事件,并不關(guān)心數(shù)據(jù),不與數(shù)據(jù)發(fā)生交集。而這個(gè)方案多一步將數(shù)據(jù)直接添加在bus實(shí)例上。且事件監(jiān)聽與數(shù)據(jù)添加需提前定義好。
  2. 數(shù)據(jù)接收方不再使用$on來(lái)得知數(shù)據(jù)變化,而是通過(guò)計(jì)算屬性的特征被動(dòng)接收。

解決的問(wèn)題

通信組件需同時(shí)存在?數(shù)據(jù)在bus上存儲(chǔ),所以沒有要求。

多次綁定?綁定監(jiān)聽都在bus上,不會(huì)重復(fù)綁定。

數(shù)據(jù)只在$emit后可用?使用計(jì)算屬性直接讀取存在bus上的值,不需要再次觸發(fā)事件。

探討

為什么使用計(jì)算屬性

其實(shí)應(yīng)該是為什么不能直接添加到data上,如 data1: bus.data1?我們可以再看一段代碼,線上代碼。 將bus修改為

data () {
 return {
  // 多一層結(jié)構(gòu)
  val: {
   result: 0
  }
 }
},
created () {
 this.$on('update1', val => {
  console.log('觸發(fā)1', i1++)
  this.val.result = val
 })
}

數(shù)據(jù)接收組件改為

// template
data中獲取直接修改值:{{dataResult}}
data中獲取直接修改值的父層:{{dataVal}}
computed中依賴直接修改值:{{computedResult}}
// js
data () {
  return {
   // 獲取直接修改值
   dataResult: bus.val.result,
   // 獲取直接修改值的父層
   dataVal: bus.val
  }
 },
 computed: {
  computedResult () {
   // 依賴直接修改值
   return bus.val.result
  }
 }

可以看到,data中獲取直接修改值值的數(shù)據(jù)是無(wú)法動(dòng)態(tài)響應(yīng)的。

為什么要用事件

其實(shí)不用 $emit觸發(fā),使用 bus.val = 1直接賦值也是可以的,那么為什么不這么做呢?

簡(jiǎn)化版的vuex

其實(shí)這種eventBus就是簡(jiǎn)化版的vuex。 vue文檔中有這樣一段話:

組件不允許直接修改屬于 store 實(shí)例的 state,而應(yīng)執(zhí)行 action 來(lái)分發(fā) (dispatch) 事件通知 store 去改變,我們最終達(dá)成了 Flux 架構(gòu)。這樣約定的好處是,我們能夠記錄所有 store 中發(fā)生的 state 改變。

store對(duì)應(yīng) bus實(shí)例, state對(duì)應(yīng) data, action對(duì)應(yīng) 事件, dispatch對(duì)應(yīng) $emit。 同時(shí)vuex中組件獲取數(shù)據(jù)的方式正是通過(guò)計(jì)算屬性,那么其實(shí)vuex和Flux架構(gòu)的理解和使用也沒有那么難不是嗎。

總結(jié)

以上所述是小編給大家介紹的vue數(shù)據(jù)傳遞--我有特殊的實(shí)現(xiàn)技巧,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!

相關(guān)文章

  • 前端vue3打印功能實(shí)現(xiàn)(多頁(yè)打印、不使用插件)

    前端vue3打印功能實(shí)現(xiàn)(多頁(yè)打印、不使用插件)

    在Vue項(xiàng)目中實(shí)現(xiàn)打印功能是前端開發(fā)中常見需求之一,這篇文章主要介紹了前端vue3打印功能實(shí)現(xiàn)的全部過(guò)程,文中介紹的方法實(shí)現(xiàn)了多頁(yè)打印并且不使用插件,需要的朋友可以參考下
    2024-09-09
  • 解決vue里a標(biāo)簽值解析變量,跳轉(zhuǎn)頁(yè)面,前面加默認(rèn)域名端口的問(wèn)題

    解決vue里a標(biāo)簽值解析變量,跳轉(zhuǎn)頁(yè)面,前面加默認(rèn)域名端口的問(wèn)題

    這篇文章主要介紹了解決vue里a標(biāo)簽值解析變量,跳轉(zhuǎn)頁(yè)面,前面加默認(rèn)域名端口的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2020-07-07
  • vuex的數(shù)據(jù)渲染與修改淺析

    vuex的數(shù)據(jù)渲染與修改淺析

    這篇文章主要給大家介紹了關(guān)于vuex的數(shù)據(jù)渲染與修改的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-11-11
  • vue輕松實(shí)現(xiàn)虛擬滾動(dòng)的示例代碼

    vue輕松實(shí)現(xiàn)虛擬滾動(dòng)的示例代碼

    移動(dòng)端網(wǎng)頁(yè)的日常開發(fā)中,偶爾會(huì)包含一些渲染長(zhǎng)列表的場(chǎng)景,本文主要介紹了vue 虛擬滾動(dòng),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-07-07
  • vue請(qǐng)求函數(shù)和路由的安裝使用過(guò)程

    vue請(qǐng)求函數(shù)和路由的安裝使用過(guò)程

    這篇文章主要介紹了vue請(qǐng)求函數(shù)和路由的安裝使用過(guò)程,本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧
    2024-08-08
  • vue-cli webpack 引入swiper的操作方法

    vue-cli webpack 引入swiper的操作方法

    今天小編就為大家分享一篇vue-cli webpack 引入swiper的操作方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2018-09-09
  • 對(duì)VUE中的對(duì)象添加屬性

    對(duì)VUE中的對(duì)象添加屬性

    今天小編就為大家分享一篇對(duì)VUE中的對(duì)象添加屬性,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2018-09-09
  • vue實(shí)現(xiàn)學(xué)生錄入系統(tǒng)之添加刪除功能

    vue實(shí)現(xiàn)學(xué)生錄入系統(tǒng)之添加刪除功能

    本文給大家?guī)?lái)一個(gè)小案例基于vue實(shí)現(xiàn)學(xué)生錄入系統(tǒng)功能,代碼簡(jiǎn)單易懂非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
    2018-07-07
  • Vuejs實(shí)現(xiàn)購(gòu)物車功能

    Vuejs實(shí)現(xiàn)購(gòu)物車功能

    這篇文章主要為大家詳細(xì)介紹了Vuejs實(shí)現(xiàn)購(gòu)物車功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-11-11
  • 解決echarts數(shù)據(jù)二次渲染不成功的問(wèn)題

    解決echarts數(shù)據(jù)二次渲染不成功的問(wèn)題

    這篇文章主要介紹了解決echarts數(shù)據(jù)二次渲染不成功的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2020-07-07

最新評(píng)論