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

簡(jiǎn)單聊聊vue2.x的$attrs和$listeners

 更新時(shí)間:2022年03月10日 09:36:25   作者:蘆薈柚子茶  
vue組件之間的通信方式有很多種,props/emit,event bus,vuex,provide/inject等,還有一種通信方式就是$attrs和$listeners,下面這篇文章主要給大家介紹了關(guān)于vue2.x中$attrs和$listeners的相關(guān)資料,需要的朋友可以參考下

$attrs

$attrs 用于多層次組件傳遞參數(shù)(組件標(biāo)簽的attribute,class和style除外),爺爺輩組件向?qū)O子輩組件傳遞參數(shù)(注:參數(shù)不能被父輩prop識(shí)別,一旦被父輩prop識(shí)別且獲取,則孫子輩組件不能獲取到該參數(shù))

寫(xiě)法如下:(注:v-bind不能用簡(jiǎn)寫(xiě) :)

<grand-son v-bind="$attrs" />

下面舉個(gè)栗子:

爺爺(GrandFather)向父親(Father)傳遞一個(gè) msg1

向?qū)O子(GrandSon)傳遞一個(gè) msg2,孫子會(huì)一并接收 msg1(然而被父親接走了,所以孫子收不到 msg1)

<!-- GrandFather.vue -->
<template>
  <div>
    GrandFather:
    <father :msg1="msg1" :msg2="msg2" />
  </div>
</template>

<script>
import Father from './Father.vue'
export default {
  components: { Father },
  data() {
    return {
      msg1: 'msg1',
      msg2: 'msg2'
    }
  }
}
</script>
<!-- Father.vue -->
<template>
  <div>
    Father: {{ msg1 }}
    <grand-son v-bind="$attrs" />
  </div>
</template>

<script>
import GrandSon from './GrandSon.vue'
export default {
  components: { GrandSon },
  props: ['msg1']
}
</script>
<!-- GrandSon.vue -->
<template>
  <div>GrandSon: {{ msg1 }}{{ msg2 }}</div>
</template>

<script>
export default {
  props: ['msg1', 'msg2']
}
</script>

界面現(xiàn)實(shí)結(jié)果:

GrandFather:
Father: msg1
GrandSon: msg2

$listeners

$listeners 用于多層次組件傳遞事件監(jiān)聽(tīng)器,爺爺輩組件向父輩、孫子輩、曾孫子輩……組件傳遞事件(與 $attrs 不同,不存在半路被攔截的情況)

寫(xiě)法如下:(注:v-on 不能用簡(jiǎn)寫(xiě) @,雖然不報(bào)錯(cuò),但是也不生效)

<grand-son v-on="$listeners" />

下面繼續(xù)使用 爺爺-> 父親 -> 孫子 的栗子:

爺爺(GrandFather)給父親(Father)綁定一個(gè) click 事件

父親通過(guò)點(diǎn)擊 div 觸發(fā) click 事件,同時(shí)向?qū)O子(GrandSon)傳遞 $listeners

<!-- GrandFather.vue -->
<template>
  <div>
    GrandFather:
    <father :msg1="msg1" :msg2="msg2" @click="handleClick" />
  </div>
</template>

<script>
import Father from './Father.vue'
export default {
  components: { Father },
  data() {
    return {
      msg1: 'msg1',
      msg2: 'msg2'
    }
  },
  methods: {
    handleClick() {
      console.log('trriger click')
    }
  }
}
</script>
<!-- Father.vue -->
<template>
  <div>
    <div @click="handleFatherClick">Father: {{ msg1 }}</div>
    <grand-son v-bind="$attrs" v-on="$listeners" />
  </div>
</template>

<script>
import GrandSon from './GrandSon.vue'
export default {
  components: { GrandSon },
  props: ['msg1'],
  methods: {
    handleFatherClick() {
      console.log('father click')
      this.$emit('click')
    }
  }
}
</script>
<!-- GrandSon.vue -->
<template>
  <div @click="handleSonClick">GrandSon: {{ msg1 }}{{ msg2 }}</div>
</template>

<script>
export default {
  props: ['msg1', 'msg2'],
  methods: {
    handleSonClick() {
      console.log('grandson click')
      this.$emit('click')
    }
  }
}
</script>

界面:

GrandFather:
Father: msg1
GrandSon: msg2

點(diǎn)擊 Father: msg1,控制臺(tái)顯示:

father click
trriger click

點(diǎn)擊 GrandSon: msg2,控制臺(tái)顯示:

grandson click
trriger click

總結(jié)

到此這篇關(guān)于vue2.x的$attrs和$listeners的文章就介紹到這了,更多相關(guān)vue2.x $attrs和$listeners內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • 解決VUE項(xiàng)目localhost端口服務(wù)器拒絕連接,只能用127.0.0.1的問(wèn)題

    解決VUE項(xiàng)目localhost端口服務(wù)器拒絕連接,只能用127.0.0.1的問(wèn)題

    這篇文章主要介紹了解決VUE項(xiàng)目localhost端口服務(wù)器拒絕連接,只能用127.0.0.1的問(wèn)題
    2020-08-08
  • 解決element DateTimePicker+vue彈出框只顯示小時(shí)

    解決element DateTimePicker+vue彈出框只顯示小時(shí)

    這篇文章主要介紹了解決element DateTimePicker+vue彈出框只顯示小時(shí),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2021-03-03
  • 前端vue+elementUI如何實(shí)現(xiàn)記住密碼功能

    前端vue+elementUI如何實(shí)現(xiàn)記住密碼功能

    這篇文章主要給大家介紹了關(guān)于vue+elementUI如何實(shí)現(xiàn)記住密碼功能的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-09-09
  • vue項(xiàng)目實(shí)現(xiàn)下載zip壓縮包

    vue項(xiàng)目實(shí)現(xiàn)下載zip壓縮包

    這篇文章主要介紹了vue項(xiàng)目實(shí)現(xiàn)下載zip壓縮包方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • Vue中如何動(dòng)態(tài)顯示表格內(nèi)容

    Vue中如何動(dòng)態(tài)顯示表格內(nèi)容

    這篇文章主要介紹了Vue中如何動(dòng)態(tài)顯示表格內(nèi)容問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • vue中防抖和節(jié)流的使用方法

    vue中防抖和節(jié)流的使用方法

    防抖和節(jié)流是我們?cè)陂_(kāi)發(fā)過(guò)程中常用優(yōu)化性能的方式,可以減少不必要的計(jì)算,不浪費(fèi)資源,只在適合的時(shí)候再進(jìn)行觸發(fā)計(jì)算,這篇文章主要給大家介紹了關(guān)于vue中防抖和節(jié)流使用的相關(guān)資料,需要的朋友可以參考下
    2021-08-08
  • Vue狀態(tài)機(jī)的開(kāi)啟與停止操作詳細(xì)講解

    Vue狀態(tài)機(jī)的開(kāi)啟與停止操作詳細(xì)講解

    Vuex是專(zhuān)門(mén)為Vuejs應(yīng)用程序設(shè)計(jì)的狀態(tài)管理工具,這篇文章主要給大家介紹了關(guān)于Vuex狀態(tài)機(jī)快速了解與實(shí)例應(yīng)用的相關(guān)資料,需要的朋友可以參考下
    2023-01-01
  • vue中使用詞云圖的實(shí)現(xiàn)示例

    vue中使用詞云圖的實(shí)現(xiàn)示例

    本文主要介紹了vue中使用詞云圖的實(shí)現(xiàn)示例,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-01-01
  • vue實(shí)現(xiàn)2048小游戲功能思路詳解

    vue實(shí)現(xiàn)2048小游戲功能思路詳解

    這篇文章主要介紹了vue實(shí)現(xiàn)2048小游戲功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2018-05-05
  • 使用this.$router.go(-1)遇到的一些問(wèn)題及解決

    使用this.$router.go(-1)遇到的一些問(wèn)題及解決

    這篇文章主要介紹了使用this.$router.go(-1)遇到的一些問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-12-12

最新評(píng)論