vue中使用v-bind=“$attrs“进行多层组件的传值&v-on=“$listener“监听事件(父级事件传递到内部组件)
使用v-bind="$attrs"进行多层组件的传值(即继承)1、最外层组件(祖父)grandfather.vue<template><div class="grandfather"><father :title="title"/></div></template><script>export default {data()
·
一、使用v-bind="$attrs"进行多层组件的传值(即继承)
1、最外层组件(祖父)grandfather.vue
<template>
<div class="grandfather">
<father :title="title"/>
</div>
</template>
<script>
export default {
data() {
return{
title: 'hello world!'
}
}
}
</script>
2、中间层组件(父亲)father.vue
<template>
<div class="grandfather">
<children v-bind="$attrs"/>
</div>
</template>
3、最里层组件(儿子)children.vue
<template>
<div class="grandfather">
{{title}}
</div>
</template>
<script>
export default {
props: {
title:{
type: String,
default: () => ''
}
}
}
</script>
这里则会取到title为 hello world!
二、v-on="$listener"监听事件(父级事件传递到内部组件)
1、最外层组件(祖父)grandfather.vue
<template>
<div class="grandfather">
<father />
</div>
</template>
<script>
export default {
data() {
return{
title: 'hello world!'
}
},
methods:{
fun(){
console.log(this.title)
}
}
}
</script>
2、中间层组件(父亲)father.vue
<template>
<div class="grandfather">
<children v-on="$listeners"/>
</div>
</template>
3、最里层组件(儿子)children.vue
<template>
<div class="grandfather">
</div>
</template>
<script>
export default {
mounted(){
this.$listeners.fun() //会打印出hello world!
}
}
</script>
总结
(1)v-bind="$attrs": 将调用组件时的组件标签上绑定的非props的特性(class和style除外)向下传递。在子组件中应当添加inheritAttrs: false(避免父作用域的不被认作props的特性绑定应用在子组件的根元素上)。
(2)3.v-on=“将父组件标签上的自定义事件向下传递其子组件可以直接通过emit(eventName)的方式调用。 vm.$
listeners : 包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on=”$listeners" 传入内部组件——在创建更高层次的组件时非常有用。
更多推荐
已为社区贡献3条内容
所有评论(0)