当前位置:首页 » 《随便一记》 » 正文

vue组件使用$listeners和$attrs隔代传参__处女座程序员的日常的博客

20 人参与  2022年03月01日 17:57  分类 : 《随便一记》  评论

点击全文阅读


1.传递属性$attrs

说明: a t t r s 只 代 表 的 是 那 些 没 有 被 声 明 为 p r o p s 的 属 性 , 如 果 某 个 p r o p 被 子 组 件 中 声 明 了 ( 就 是 这 个 属 性 已 经 在 子 组 件 的 p r o p s 中 了 ) , 在 子 组 件 中 的 attrs只代表的是那些没有被声明为props的属性, 如果某个prop被子组件中声明了(就是这个属性已经在子组件的props中了), 在子组件中的 attrspropsproppropsattrs就会把声明的prop剔除。
2.传递方法
l i s t e n e r s 包 含 了 父 作 用 域 中 的 ( 不 含 . n a t i v e 修 饰 器 的 ) v − o n 事 件 监 听 器 。 它 可 以 通 过 v − o n = " listeners包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。 它可以通过 v-on=" listeners(.native)vonvon="listeners" 传入内部组件——在创建更高层次的组件时非常有用。

三个组件:分别是:
parent.vue
son.vue
grandson.vue

// 父组件
 <template lang="">
    <div>
        父组件
        <Son :name="name"  @change='change'></Son>
    </div>
</template>
<script>
  import Son from './son.vue'
export default {
    data(){
        return{
        name:"周冬雨"
        }
    },
    components:{
        Son
    },
    methods: {
        change(){
            this.name = "马冬梅";
        }
    },
}

//儿子组件
<template >
    <div>
        儿子组件
        <GrandSon v-bind='$attrs'></GrandSon>//通过v-bin进行传递
    </div>
</template>
<script>
import GrandSon from './grandson'
export default {
    components:{
        GrandSon
    }
}
</script>

</script>


//孙子组件
<template >
    <div>
        孙子组件
        姓名:{{$attrs.name}}
         <button @click='handleClick'>改变</button>
    </div>
</template>
<script>
export default {
 methods: {
        handleClick(){
            this.$listeners.change();
        }
    },
}
</script>


页面显示:
1.最终在孙子组件中获取到了他爷爷的值
在这里插入图片描述
2.通过$listeners孙子组件也可以获取到他爷爷的方法。点击按钮效果如下,直接调用了爷爷的change方法,修改了name的值。

在这里插入图片描述


点击全文阅读


本文链接:http://zhangshiyu.com/post/35597.html

组件  孙子  属性  
<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 此去经年人未还内容精选沈青禾霍沉洲完本_此去经年人未还内容精选(沈青禾霍沉洲)
  • 全书浏览此去经年人未还精编之作(沈青禾霍沉洲周雪芙)_此去经年人未还精编之作(沈青禾霍沉洲周雪芙)全书结局
  • 此去经年人未还***(沈青禾霍沉洲周雪芙)_此去经年人未还***
  • 梦又不成灯又烬结局+番外高分完本(乔念宋云澜),梦又不成灯又烬结局+番外高分完本
  • 「爱随流水去」限免完整章节合集‌_[云逸廖致轩曲静琪]后续已完结
  • 江临川沈婉宁全书+番外+(你与月光一同褪色全书+番外+)免费在线_江临川沈婉宁(你与月光一同褪色全书+番外+)
  • (番外)+(全书)霍沉洲沈青禾(沈青禾霍沉洲结局+番外全书+后续+结局)_霍沉洲沈青禾免费列表_笔趣阁(沈青禾霍沉洲结局+番外全书+后续+结局)
  • 此去经年人未还结局+番外笔趣阁(沈青禾霍沉洲),此去经年人未还结局+番外笔趣阁
  • (番外)+(全书)相思流年也成空+后续+结局(顾晚周时琛)全书在线_相思流年也成空+后续+结局免费列表_笔趣阁(顾晚周时琛)
  • [重生1960,我窝在深山打猎]反转剧情碎片化试读_「林风金凤」小说精彩章节分享
  • 此去经年人未还一口气读完(沈青禾霍沉洲周雪芙)
  • 全文此去经年人未还+后续+结局(沈青禾霍沉洲周雪芙)列表_全文此去经年人未还+后续+结局

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1