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

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

12 人参与  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)
  • 赞助本站

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

最新文章

  • 无人知晓的99次日出超长版_陆凛林晚乔昭昭好评_小说后续在线阅读_无删减免费完结_
  • 我妈拿掉我的子宫后,悔疯了惊天黑幕_子宫汪子楠楠新鲜出炉_小说后续在线阅读_无删减免费完结_
  • 我的长公主身份曝光后,他们吓疯了节选高光片段速递‌(姜明远)_我的长公主身份曝光后,他们吓疯了节选高光片段速递‌(姜明远)
  • 心火焚尽终不归楚长安苏明月小说(楚长安苏明月)前传+全书阅读新作预览
  • 重生后好孕医女一胎三宝,前世夫君却悔哭了正版(陆允霄),重生后好孕医女一胎三宝,前世夫君却悔哭了正版
  • 重生1990,从回国造彩电开始更新_唐振华罗捷一口气看完_小说后续在线阅读_无删减免费完结_
  • 重生在高考前,我笑着送小青梅和小混混去庆祝成人礼(沈晏安乔念)全书免费_(沈晏安乔念)重生在高考前,我笑着送小青梅和小混混去庆祝成人礼后续(沈晏安乔念)
  • 特种任务归来未婚妻和八个竹马抽签入洞房完结+番外(林晚晚赵熙诚林邵纪行川)
  • 只此浮生是梦中精彩节选(宋今禾)
  • 莫名我就喜欢你人气节选(严书韵陆纪州)_莫名我就喜欢你人气节选
  • 哦豁!杀疯后她成了反派黑月光!彩蛋(叶邢舒赵翊宁)全书在线下载阅读完美终章小说大结局
  • 小说故梦远去几华里小说已更新+番外篇章(沈南依萧砚辞)纯净阅读

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

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