关于 vue2.x 的 $attrs 和 $listeners

vue

$attrs

$attrs 用于多层次组件传递参数(组件标签的attribute,class和style除外),爷爷辈组件向孙子辈组件传递参数(注:参数不能被父辈prop识别,一旦被父辈prop识别且获取,则孙子辈组件不能获取到该参数)

写法如下:(注: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>

界面现实结果:

GrandFather:

Father: msg1

GrandSon: msg2


$listeners

$listeners 用于多层次组件传递事件监听器,爷爷辈组件向父辈、孙子辈、曾孙子辈……组件传递事件(与 $attrs 不同,不存在半路被拦截的情况)

写法如下:(注:v-on 不能用简写 @,虽然不报错,但是也不生效)

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

下面继续使用 爷爷-> 父亲 -> 孙子 的栗子:

爷爷(GrandFather)给父亲(Father)绑定一个 click 事件

父亲通过点击 div 触发 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 的全部内容, 来源链接: utcz.com/z/380876.html

回到顶部