vue使用$attrs和$listeners多级组件嵌套传递数据

 更新时间:2023年08月11日 11:29:17   作者:sugar_coffee  
这篇文章主要为大家介绍了vue使用$attrs和$listeners多级组件嵌套传递数据示例解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

多级组件嵌套需要传递数据

通常使用的方法是通过vuex。如果仅仅是传递数据,而不做中间处理,使用 vuex 处理,这就有点大材小用了。所以就有了 $attrs / $listeners ,通常配合 inheritAttrs 一起使用。

inheritAttrs:默认值为 true。

默认情况下父作用域的不被认作 props 的 attribute 绑定 (attribute bindings) 将会“回退”且作为普通的 HTML attribute 应用在子组件的根元素上。当撰写包裹一个目标元素或另一个组件的组件时,这可能不会总是符合预期行为。通过设置 inheritAttrs 到 false,这些默认行为将会被去掉。而通过 (同样是 2.4 新增的) 实例 property $attrs 可以让这些 attribute 生效,且可以通过 v-bind 显性的绑定到非根元素上。查 看 官 网

感觉还是挺晦涩难懂的,简单的说就是 inheritAttrs:true 继承除props之外的所有属性;

inheritAttrs:false 只继承class属性

$attrs:包含了父作用域中不被认为 (且不预期为) props 的特性绑定 (class 和 style 除外),并且可以通过 v-bind=”$attrs” 传入内部组件。当一个组件没有声明任何 props 时,它包含所有父作用域的绑定 (class 和 style 除外)。

$listeners:包含了父作用域中的 (不含 .native 修饰符) v-on 事件监听器。它可以通过 v-on=”$listeners” 传入内部组件。它是一个对象,里面包含了作用在这个组件上的所有事件监听器,相当于子组件继承了父组件的事件。

话不多说,咱先上栗子

father.vue 组件

<template>
   <child :name="name" :age="age" :infoObj="infoObj" @updateInfo="updateInfo" @delInfo="delInfo" />
</template>
<script>
    import Child from '../components/child.vue'
    export default {
        name: 'father',
        components: { Child },
        data () {
            return {
                name: 'Lily',
                age: 22,
                infoObj: {
                    from: '上海',
                    job: 'policeman',
                    hobby: ['reading', 'writing', 'skating']
                }
            }
        },
        methods: {
            updateInfo() {
                console.log('update info');
            },
            delInfo() {
                console.log('delete info');
            }
        }
    }
</script>

child.vue 组件

<template>
    <grand-son :height="height" :weight="weight" @addInfo="addInfo" v-bind="$attrs" v-on="$listeners"  />
    // 通过 $listeners 将父作用域中的事件,传入 grandSon 组件,使其可以获取到 father 中的事件
</template>
<script>
    import GrandSon from '../components/grandSon.vue'
    export default {
        name: 'child',
        components: { GrandSon },
        props: ['name'],
        data() {
          return {
              height: '180cm',
              weight: '70kg'
          };
        },
        created() {
            console.log(this.$attrs); 
       // 结果:age, infoObj, 因为父组件共传来name, age, infoObj三个值,由于name被 props接收了,所以只有age, infoObj属性
            console.log(this.$listeners); // updateInfo: f, delInfo: f
        },
        methods: {
            addInfo () {
                console.log('add info')
            }
        }
    }
</script>

grandSon.vue 组件

<template>
    <div>
        {{ $attrs }} --- {{ $listeners }}
    <div>
</template>
<script>
    export default {
        ... ... 
        props: ['weight'],
        created() {
            console.log(this.$attrs); // age, infoObj, height 
            console.log(this.$listeners) // updateInfo: f, delInfo: f, addInfo: f
            this.$emit('updateInfo') // 可以触发 father 组件中的updateInfo函数
        }
    }
</script>

这种方式的传值对我来说不常用,感觉可读性不是很好。但其对于组件层级嵌套比较深,使用props会很繁琐,或者项目比较小,不太适合使用 Vuex 的时候,可以考虑用它。

以上就是vue使用$attrs和$listeners多级组件嵌套传递数据的详细内容,更多关于vue组件嵌套传递数据$attrs $listeners的资料请关注脚本之家其它相关文章!

相关文章

  • HBuilder导入vue项目并通过域名访问的过程详解

    HBuilder导入vue项目并通过域名访问的过程详解

    这篇文章主要介绍了HBuilder导入vue项目并通过域名访问,一般情况下运行vue项目需要安装node.js,通过npm命令来安装vue组件和运行vue项目,本文给大家介绍的非常详细,需要的朋友可以参考下
    2022-05-05
  • vue h5移动端禁止缩放代码

    vue h5移动端禁止缩放代码

    今天小编就为大家分享一篇vue h5移动端禁止缩放代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • Vue Router如何刷新当前页面

    Vue Router如何刷新当前页面

    Vue项目, 在实际工作中, 有些时候需要在 加载完某些数据之后对当前页面进行刷新, 这篇文章主要为大家介绍了三种常用方法,需要的可以参考一下
    2023-10-10
  • Vue 3.0 v-for中的Ref数组用法小结

    Vue 3.0 v-for中的Ref数组用法小结

    在 Vue 2 中,在 v-for 里使用的 ref attribute会用ref 数组填充相应的 $refs property,本文给大家介绍Vue 3.0 v-for中的Ref数组的相关知识,感兴趣的朋友一起看看吧
    2023-12-12
  • vue中的vue-router query方式和params方式详解

    vue中的vue-router query方式和params方式详解

    这篇文章主要介绍了vue中的vue-router query方式和params方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • Vue2.x中利用@font-size引入字体图标报错的解决方法

    Vue2.x中利用@font-size引入字体图标报错的解决方法

    今天小编就为大家分享一篇Vue2.x中利用@font-size引入字体图标报错的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • 基于ant design日期控件使用_仅月份的操作

    基于ant design日期控件使用_仅月份的操作

    这篇文章主要介绍了基于ant design日期控件使用_仅月份的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • vue打印浏览器页面功能的两种实现方法

    vue打印浏览器页面功能的两种实现方法

    这篇文章主要给大家介绍了关于vue打印浏览器页面功能的两种实现方法,这个功能其实也是自己学习到的,做完也有一段时间了,一直想记录总结一下,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-04-04
  • vue实现左右点击滚动效果

    vue实现左右点击滚动效果

    这篇文章主要为大家详细介绍了vue实现左右点击滚动效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-01-01
  • Vue自定义指令详解

    Vue自定义指令详解

    这篇文章主要为大家详细介绍了Vue自定义指令的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07

最新评论