快捷導(dǎo)航

簡單聊聊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ù)）

寫法如下：（注：v-bind不能用簡寫 :）

<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)聽器，爺爺輩組件向父輩、孫子輩、曾孫子輩……組件傳遞事件（與 $attrs 不同，不存在半路被攔截的情況）

寫法如下：（注：v-on 不能用簡寫 @，雖然不報(bào)錯(cuò)，但是也不生效）

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

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

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

父親通過點(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>

界面：