IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> vue组件使用$listeners和$attrs隔代传参 -> 正文阅读

[JavaScript知识库]vue组件使用$listeners和$attrs隔代传参

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)v?onv?on="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的值。

在这里插入图片描述

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-10-03 17:00:20  更:2021-10-03 17:00:33 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年12日历 -2024/12/29 4:21:09-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码
数据统计