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

簡單聊聊vue2.x的$attrs和$listeners

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

$attrs

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

寫法如下:(注:v-bind不能用簡寫 :)

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

下面舉個栗子:

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

向孫子(GrandSon)傳遞一個 msg2,孫子會一并接收 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)實結果:

GrandFather:
Father: msg1
GrandSon: msg2

$listeners

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

寫法如下:(注:v-on 不能用簡寫 @,雖然不報錯,但是也不生效)

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

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

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

父親通過點擊 div 觸發(fā) click 事件,同時向孫子(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

點擊 Father: msg1,控制臺顯示:

father click
trriger click

點擊 GrandSon: msg2,控制臺顯示:

grandson click
trriger click

總結

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

相關文章

  • 解決VUE項目localhost端口服務器拒絕連接,只能用127.0.0.1的問題

    解決VUE項目localhost端口服務器拒絕連接,只能用127.0.0.1的問題

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

    解決element DateTimePicker+vue彈出框只顯示小時

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

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

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

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

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

    Vue中如何動態(tài)顯示表格內容

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

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

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

    Vue狀態(tài)機的開啟與停止操作詳細講解

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

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

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

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

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

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

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

最新評論