vue2中 attrs 和 listeners 的使用(组件通信)
vue2.4.0新增$attrs
和$listener
属性
-
attrs
当一个组件没有声明任何 prop 时,
$attrs
会包含所有父作用域的绑定 (class 和 style 除外),并且可以通过v-bind="$attrs"
传入内部组件,一般用在子组件的子元素上 -
listener
包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过
v-on="$listeners"
传入内部组件
<template>
<div class="page-all">
a-page
<B :msg1="msg1" :msg2="msg2" @method1="handleClick" @method2="handleClick"></B>
</div>
</template>
<script>
import B from "./B.vue"
export default {
name: "A",
data() {
return {
msg1: "msg1",
msg2: "msg2",
}
},
components: {B},
methods: {
handleClick() {
console.log('a click')
}
},
mounted() {},
}
</script>
<template>
<div class="page-all">
b-page
<p>$attrs: {
{ $attrs }}</p>
<div @click="handleAClick">handleAClick: {
{ msg1 }}</div>
<C v-bind="$attrs" v-on="$listeners"></C>
</div>
</template>
<script>
import C from "./C.vue"
export default {
name: "B",
props: ['msg1'],
data() {
return {}
},
components: {C},
methods: {
handleAClick() {
console.log('b click')
this.$emit('method1')
}
},
mounted() {},
}
</script>
<template>
<div class="page-all">
c-page
<p>$attrs: {
{ $attrs }}</p>
<div @click="handleCClick">handleCClick: {
{ msg1 }}{
{ msg2 }}</div>
</div>
</template>
<script>
export default {
name: "C",
props: ['msg1', 'msg2'],
data() {
return {}
},
components: {},
methods: {
handleCClick() {
console.log('c click')
this.$emit('method2')
}
},
mounted() {},
}
</script>
-
总结
$attrs
是把父组件发送但本组件props
不接收的下发到孙子组件,而listener
是把父组件的@方法
继承到孙子组件