扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue$attrs和$listeners的使用与区别
  • 661

0
分享到

vue$attrs和$listeners的使用与区别

2024-04-02 19:04:59 661人浏览 安东尼
摘要

首先让我们看一下这张图，表示了一个多级关联的组件嵌套 为什么要用$attrs 和 $listeners 先让我们来想一种情况，就是组件A跟组件C怎么通信，我们可以有多少中解决方案？

首先让我们看一下这张图，表示了一个多级关联的组件嵌套

为什么要用$attrs 和 $listeners

先让我们来想一种情况，就是组件A跟组件C怎么通信，我们可以有多少中解决方案？

  • 看到这种情况，大多数人应该会想到用Vuex来进行数据通信吧，但是如果项目中多个组件中的共享状态很少，且项目比较小，全局数据通信也很少，那我们用vuex来实现这个功能，就感觉有点杀鸡用牛刀了
  • 我们可以使用组件B来做通信的中转站，当组件A需要把数据传到组件C时，组件A通过props将数据传给组件B，然后组件B再用props传给组件C，这是一种解决方案，但是如果嵌套的组件过多，就会导致代码冗余且繁琐，维护就比较困难，而且如果组件C也要将数据传给组件A，也要一层一层往上传递，就更麻烦了
  • 自定义一个Vue数据总线，这种适合组件跨级传递数据，但是缺点是碰到多人合作时，会导致代码的维护性较低，代码可读性也较低
  • 还有一种解决方案，就是用provide inject，但是这种方式，官方不推荐，因为这个方法真的是太不好管控了，比如说我在根组件provide了this，孙孙重孙组件去使用了this里面的一个变量，这时候很难去跟踪到这个变量的出处了，而且你也并不知道，项目中哪个组件有用到这个变量，有没有在其他组件中进行改变，所以这个api在项目中很少人使用，但是很多人拿来写组件用

在很多开发情况下，我们只是想把组件A的数据传给组件C，如果用props来进行组件通信的话，虽然可以实现，但是代码可读性上不强，且难维护。

所以这时候，我们的主角$attrs 和 $listeners 就出现了

$attrs 和 $listeners 的用法

在vue2.4中，为了解决该需求，引入了$attrs 和$listeners， 新增了inheritAttrs 选项。 在版本2.4以前，默认情况下父作用域的不被认作props的属性属性百年孤独，将会“回退”且作为普通的html特性应用在子组件的根元素上。如下列的例子

父组件的代码：

<template>
  <div>
    <child-dom :foo="foo" :bar="bar"></child-dom>
  </div>
</template>
​
<script>
import ChildDom from "../components/attrs/ChildDom.vue";
export default {
  components: {
    ChildDom,
  },
  data() {
    return {
      foo: "foo",
      bar: "bar",
    };
  },
};
</script>

子组件的代码：

<template>
  <div>
    <p>foo:{{ foo }}</p>
  </div>
</template>
​
<script>
export default {
  props: ["foo"],
};
</script>

我们先看一下这样写的时候，控制台打印出来的dom结构是这样的：

在2.4中新增选项inheritAttrs，inheritAttrs的默认值为true, 将inheritAttrs的值设为false, 这些默认的行为会禁止掉。但是通过实例属性 $attrs ,可以将这些特性生效，且可以通过v-bind 绑定到子组件的非根元素上。

将子组件的代码修改一下：

<template>
  <div>
    <p>foo:{{ foo }}</p>
    <p>attrs: {{ $attrs }}</p>
    <dom-child v-bind="$attrs"></dom-child>
  </div>
</template>
​
<script>
import DomChild from "./DomChild.vue";
export default {
  props: ["foo"],
  inheritAttrs: false,
  components: {
    DomChild,
  },
};
</script>

然后在加一个孙组件

<template>
  <div>
    <p>bar:{{ bar }}</p>
  </div>
</template>
​
<script>
export default {
  props: ["bar"],
};
</script>

页面显示如下：

从上面的代码，可以看出使用$attrs ，inheritAttrs 属性能够使用简洁的代码，将组件A的数据传递给 组件C，该场景的使用范围还是挺广的。

那我们现在来看看组件C怎么传值给组件A？

vue2.4版本新增了$listeners 属性，我们在组件B上 绑定 v-on=”$listeners”, 在组件A中，监听组件C触发的事件。就能把组件C发出的数据，传递给组件A。

修改一下父组件的代码：

<template>
  <div>
    <child-dom :foo="foo" :bar="bar" @upFoo="update"></child-dom>
  </div>
</template>
​
<script>
import ChildDom from "../components/attrs/ChildDom.vue";
export default {
  components: {
    ChildDom,
  },
  data() {
    return {
      foo: "foo",
      bar: "bar",
    };
  },
  methods: {
    update(val) {
      this.foo = val;
      console.log("update success");
    },
  },
};
</script>

子组件代码：

<template>
  <div>
    <p>foo:{{ foo }}</p>
    <p>attrs: {{ $attrs }}</p>
    <dom-child v-bind="$attrs" v-on="$listeners"></dom-child>
  </div>
</template>
​
<script>
import DomChild from "./DomChild.vue";
export default {
  props: ["foo"],
  inheritAttrs: false,
  components: {
    DomChild,
  },
};
</script>

孙组件代码：

<template>
  <div>
    <p>bar:{{ bar }}</p>
    <button @click="startUpFoo">我要更新foo</button>
  </div>
</template>
​
<script>
export default {
  props: ["bar"],
  methods: {
    startUpFoo() {
      this.$emit("upFoo", "foooooooooooo");
      console.log("startUpFoo");
    },
  },
};
</script>

运行结果：

现在我们应该清楚了$attrs，$listerners，inheritAttrs 的作用了吧

到此这篇关于vue $attrs和$listeners的使用与区别的文章就介绍到这了,更多相关vue $attrs $listeners内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

--结束END--

本文标题: vue$attrs和$listeners的使用与区别

本文链接: https://lsjlt.com/news/138654.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • vue$attrs和$listeners的使用与区别
    首先让我们看一下这张图，表示了一个多级关联的组件嵌套 为什么要用$attrs 和 $listeners 先让我们来想一种情况，就是组件A跟组件C怎么通信，我们可以有多少中解决方案？...
    99+
    2024-04-02
  • Vue中$attrs与$listeners怎么使用
    本篇内容主要讲解“Vue中$attrs与$listeners怎么使用”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Vue中$attrs与$listeners怎么使用”吧!介绍$attrs继承所有...
    99+
    2023-06-21
  • Vue中$attrs与$listeners的使用教程
    目录介绍举例总结 介绍 $attrs 继承所有的父组件属性（没有通过 props 接收的属性还有 class 类名 和 style 样式 ）。 inheritAttrs： 是否非 p...
    99+
    2024-04-02
  • 详解Vue中$props、$attrs和$listeners的使用方法
    目录背景一、文档描述二、具体使用三、总结背景 现在我们来讨论一种情况，父组件与孙子组件怎么通信，我们有多少种解决方案？ 我们使用VueX来进行数据管理，但是如果项目中多个组件共享状态...
    99+
    2024-04-02
  • Vue中$attrs和$listeners详解以及使用方法
    目录Vue中 常见的组件通信方式可分为三类1. 前言2. 知识点3. 示例总结 传送门：Vue中 子组件向父组件传值 及 .sync 修饰符 详解传送门：Vue中 状态管理...
    99+
    2022-11-16
    vue $attrs $listeners vue $attrs $listeners属性
  • Vue封装组件利器之$attrs、$listeners的使用
    目录前言$attrs例子：$listeners (官网解释)使用场景总结前言 多级组件嵌套需要传递数据时，通常使用的方法是通过vuex。但仅仅是传递数据，不做中间处理，使用 vuex...
    99+
    2024-04-02
  • vue中的$attrs和$listeners属性及用法是什么
    vue中的$attrs和$listeners属性及用法是什么，很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。多级组件嵌套需要传递数据时，通常使用的方法是通过vue...
    99+
    2023-06-22
  • Vue3中emits与attrs的区别分析
    目录结论实践分析扩展总结结论 当在父组件自定义事件，若没有在子组件中声明时，将自动绑定在父组件的$attrs上；而当在子组件声明时，则不会在父组件的$attrs上出现 实践分析 ...
    99+
    2024-04-02
  • vue$attrs的使用全面解析
    目录$attrs的使用vue以下是$attrs的使用示例1.父组件（Father.vue）2.儿子组件（Child.vue）3.孙子组件（GrandChild.vue）$attrs到...
    99+
    2024-04-02
  • 使用React与Vue的区别有哪些
    这篇文章主要介绍“使用React与Vue的区别有哪些”，在日常操作中，相信很多人在使用React与Vue的区别有哪些问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”使用Reac...
    99+
    2024-04-02
  • Vue axios和vue-axios的关系及使用区别
    目录axios和vue-axios的关系/区别axios和vue-axios的使用方式区别1、axios使用方式2、vue-axios使用方式axios和vue-axios的使用哪一...
    99+
    2022-11-13
    Vue axios和vue-axios关系 Vue axios和vue-axios使用区别 Vue axios和vue-axios区别
  • vue与angular的区别
    vue与angular的区别有：angular的学习成本高、比较复杂，而vue本身提供的API相对简单、直观。在性能上，angular比vue要慢，因为angular依赖对数据做脏检查，所以Watcher越多越慢，而vue使用基于依赖追踪的...
    99+
    2024-04-02
  • vue与react的区别
    vue与react的区别是：1.监听数据变化的实现原理不同；2.数据流的不同；3.组合不同功能的方式不同；4.框架本质不同；5.模板渲染方式的不同；6.渲染过程不同等。具体如下：监听数据变化的实现原理不同，vue是通过getter/sett...
    99+
    2024-04-02
  • vue中LocalStorage与SessionStorage的区别与用法
    目录什么是LocalStorage什么是SessionStorageLocalStorage与SessionStorage的区别LocalStorage与SessionStorage...
    99+
    2024-04-02
  • vue中assets与static的区别
    vue中assets与static的区别：assets中的文件会经过webpack打包并重新编译，而static中的文件是不会经过编译的，打包后会生成dist文件夹。将图片放在assets和static中，在html页面中都可以使用，但是在...
    99+
    2024-04-02
  • 如何使用attrs来告别Python中的样板
    如何使用attrs来告别Python中的样板，很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。在我们覆盖 7 个 PyPI 库的系列文章中了解更多解决 Python...
    99+
    2023-06-16
  • redis setIfAbsent和setnx的区别与使用说明
    redis setIfAbsent和setnx的区别与使用 如果为空就set值，并返回1 如果存在(不为空)不进行操作，并返回0 setIfAbsent 和 setnx 使用范围 s...
    99+
    2024-04-02
  • vue中的attribute和property的具体使用及区别
    目录作为 attribute 和 property 的 value 及 Vue.js 的相关处理 attribute 和 property 的概念 attribute 和 prope...
    99+
    2024-04-02
  • vue中使用slot与slot-scope有什么区别
    本文小编为大家详细介绍“vue中使用slot与slot-scope有什么区别”，内容详细，步骤清晰，细节处理妥当，希望这篇“vue中使用slot与slot-scope有什么区别”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习...
    99+
    2023-07-04
  • vue3中$attrs的变化与inheritAttrs的使用详解
    目录在vue3中的$attrs的变化在vue2中的$attrs父组件的属性直接渲染在根节点上在vue3中的$attrs的变化 $listeners已被删除合并到$attrs中。 $a...
    99+
    2022-11-13
    vue3 $attrs与inheritAttrs的使用 vue3 inheritAttrs使用
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作