vue的$attrs_vue获取list集合中的对象

vue的$attrs_vue获取list集合中的对象​说明本文用示例介绍Vue的$attrs和$listener的用法官网API—Vue.js$attrs和$listeners介绍Vue2.4中,引入了attrs和listeners,新增了inheritAttrs选项。$attrs:包含了父作用域中没有被prop接收的所有属性(不包含class和style属性)。可以通过v-bind=”$attrs”直接将这些属性传入内部组件。$

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

原文网址:Vue–$attrs, $listeners–使用/教程/实例_IT利刃出鞘的博客-CSDN博客

简介

说明

        本文用示例介绍Vue的$attrs和$listeners的用法。

使用场景

$attrs:用于父组件隔代向孙组件传值。

$listeners:用于孙组件隔代向父组件传值。

当然,这两个也可以同时使用,达到父组件和孙组件双向传值的目的。

官网

API — Vue.js

$attrs 和 $listeners介绍

        Vue2.4 中,引入了attrs 和 listeners , 新增了 inheritAttrs 选项。

        $attrs:包含了父作用域中没有被 prop 接收的所有属性(不包含class 和 style 属性)。可以通过 v-bind=”$attrs” 直接将这些属性传入内部组件。

        $listeners:包含所有父组件中的 v-on 事件监听器 (不包含 .native 修饰器的) ,可以通过 v-on=”$listeners” 传入内部组件。

         inheritAttrs为true:继承除props之外的所有属性;inheritAttrs为false:只继承class属性

$attrs

简介

vue的$attrs_vue获取list集合中的对象

现有3个嵌套组件,A->B,B->C。

A组件传值给C组件,有多少种解决方案?

  1. Vuex我们使用vuex来进行数据管理,依赖于vuex我们可以一次改变,任何一个组件中都能获取。但是如果多个组件共享状态比较少,使用vuex过于麻烦和难以维护。element-ui中大量采用此方法。
  2. 自定义vue bus事件总线,原理类似vuex,使用特别简单。bus适合碰到组件跨级兄弟组件等无明显依赖关系的消息传递,原生app开发中经常用到,但是缺点是bus破坏了代码的链式调用,大量的滥用将导致逻辑的分散,出现问题后很难定位,降低了代码可读性。
  3. 使用B来做中转,A传递给B,B再给C**,**这是最容易想到的方案,但是如果嵌套的组件过多,需要传递的事件和属性较多,会导致代码繁琐,代码维护困难。

示例:父组件隔代传值给孙组件

代码

Parent.vue(父组件(顶层组件))

<template>
  <div class="outer">
    <h3>父组件</h3>

    名字:<input v-model="name">
    年龄:<input v-model.number="age" type="number">
    电话:<input v-model="phoneNumber">

    <child :name="name" :age="age" :phoneNumber="phoneNumber"></child>
  </div>
</template>

<script>
import Child from "./Child";
export default {
  name: 'Parent',
  components: {Child},
  data() {
    return {
      name: 'Tony',
      age: 20,
      phoneNumber: '1234567890'
    }
  }
}
</script>

<style scoped>
.outer {
  margin: 20px;
  border: 2px solid red;
  padding: 20px;
}
</style>

Child.vue(子组件(中间组件))

        子组件作为父组件和孙组件的传递中介,在儿子组件中给孙子组件添加v-bind=”$attrs”,这样孙子组件才能接收到数据。

<template>
  <div class="outer">
    <h3>子组件</h3>
    <div>获得顶层组件的name:{
  
  {name}}</div>
    <grand-child v-bind="$attrs"></grand-child>
  </div>
</template>

<script>
import GrandChild from "./GrandChild";
export default {
  components: {GrandChild},
  props: ['name'],
  created() {
    console.log('Child=> $attrs: ' + JSON.stringify(this.$attrs));
  }
}
</script>

<style scoped>
.outer {
  margin: 20px;
  border: 2px solid blue;
  padding: 20px;
}
</style>

GrandChild.vue(孙组件(最底层组件))

孙组件使用props接收从父组件传递过来的数据。(也可以在created时接收数据)

<template>
  <div class="outer">
    <h3>孙组件</h3>
    <div>顶层组件的name:{
  
  {name}}</div>
    <div>顶层组件的age:{
  
  {age}}</div>
    <div>顶层组件的phoneNumber:{
  
  {phoneNumber}}</div>
  </div>
</template>
<script>
export default {
  name: "GrandChild",
  props: {
    name: {
      type: String
    },
    age: {
      type: Number
    },
    phoneNumber: {
      type: String
    }
  },
  created() {
    // this.parentAge = this.age;  //也可以这样取值
    console.log('GrandChild=> $attrs: ' + JSON.stringify(this.$attrs));
  }

}
</script>

<style scoped>
.outer {
  margin: 20px;
  border: 2px solid green;
  padding: 20px;
}
</style>

路由(store/index.js)

import Vue from 'vue'
import Router from 'vue-router'
import Parent from "../components/Parent";

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/parent',
      name: 'Parent',
      component: Parent,
    }
  ],
})

测试

测试1:访问

访问:http://localhost:8080/#/parent

vue的$attrs_vue获取list集合中的对象

可以看到:

子组件的$attrs中包含了所有除了本组件props之外的父组件属性。

孙组件无法获取到未被子组件props接收的属性:name

孙组件可以获取到未被子组件props接收的属性:age,phoneNumber

测试2:父组件动态传值给子孙组件

vue的$attrs_vue获取list集合中的对象

$listeners

示例:孙组件隔代传值给父组件

代码

Parent.vue(父组件(顶层组件))

<template>
  <div class="outer">
    <h3>父组件</h3>
    <div>myData:{
  
  { myData }}</div>
    <child @changeData="changeMyData"></child>
  </div>
</template>
<script>
import Child from "./Child";
export default {
  name: 'Parent',
  components: {Child},
  data() {
    return {
      myData: 100
    };
  },
  methods: {
    changeMyData(val) {
      this.myData = val;
    }
  }
}
</script>

<style scoped>
.outer {
  margin: 20px;
  border: 2px solid red;
  padding: 20px;
}
</style>

Child.vue(子组件(中间组件))

        子组件作为父组件和孙组件的传递中介,在儿子组件中给孙子组件添加v-on=”$listeners”,这样父组件才能接收到孙组件的数据。

<template>
  <div class="outer">
    <h3>子组件</h3>
    <grand-child v-on="$listeners"></grand-child>
  </div>
</template>
<script>
import GrandChild from "./GrandChild";
export default {
  components: {GrandChild}
}
</script>

<style scoped>
.outer {
  margin: 20px;
  border: 2px solid blue;
  padding: 20px;
}
</style>

GrandChild.vue(孙组件(最底层组件))

<template>
  <div class="outer">
    <h3>孙组件</h3>
    <input v-model="data1" @input="edit"/>
  </div>
</template>
<script>
export default {
  name: "GrandChild",
  data() {
    return {
      data1: 200,
    }
  },
  methods: {
    edit() {
      // 发送事件
      this.$emit("changeData", this.data1);
    }
  }
}
</script>

<style scoped>
.outer {
  margin: 20px;
  border: 2px solid green;
  padding: 20px;
}
</style>

路由(store/index.js)

import Vue from 'vue'
import Router from 'vue-router'
import Parent from "../components/Parent";

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/parent',
      name: 'Parent',
      component: Parent,
    }
  ],
})

测试

测试1:访问

访问:http://localhost:8080/#/parent

vue的$attrs_vue获取list集合中的对象

一开始,父组件和孙组件的数据不一致,都是初始数据。

测试2:孙组件动态传值给父组件

vue的$attrs_vue获取list集合中的对象

实际应用

应用1:封装组件

        element-ui开发的后台项目中,大量使用到了el-table和el-pagination做分页数据展示,所以我封装一个自定义组件page-table:

<template>
  <div class="page-table">
    <div class="wrapper">
      <el-table
          ref="elTable"
          :data="tableData">
        <slot/>
      </el-table>
      <div style="margin-top: 16px;overflow: hidden">
        <el-pagination
            class="page"
            :current-page="currentPage"
            layout="total, prev, pager, next, jumper"
            :total="total"
            @current-change="handleCurrentChange"/>
      </div>
    </div>
  </div>
</template>

        这样做的副作用是:引用page-table的地方无法使用el-table和属性和事件。

        解决方案:在el-table使用的地方加上v-on=”$listeners”和v-bind=”$attrs”,这样使用page-table的地方可使用所有el-table的属性和事件。

<template>
  <div class="page-table">
    <div class="wrapper">
      <el-table
          ref="elTable"
          v-bind="$attrs"
          v-on="$listeners"
          :data="tableData">
        <slot/>
      </el-table>
      <div style="margin-top: 16px;overflow: hidden">
        <el-pagination
            class="page"
            :current-page="currentPage"
            layout="total, prev, pager, next, jumper"
            :total="total"
            @current-change="handleCurrentChange"/>
      </div>
    </div>
  </div>
</template>

应用2:兄弟组件传值到最外层

        有时候会碰到多个兄弟组件传递参数到最外层,如有B组件包含C1和C2,都需要和A交互,定义2个props使用v-bind即可。

<template>
  <div class="page-table">
    <div class="wrapper">
      <el-table
          ref="elTable"
          v-bind="table1Props"
          :data="tableData">
        <slot/>
      </el-table>
      <el-table
          ref="elTable"
          v-bind="table2Props"
          :data="tableData">
        <slot/>
      </el-table>
      <div style="margin-top: 16px;overflow: hidden">
        <el-pagination
            class="page"
            :current-page="currentPage"
            layout="total, prev, pager, next, jumper"
            :total="total"
            @current-change="handleCurrentChange"/>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    props: {
      table1Props: Object,
      table2Props: Object,
    }
</script>

其他网址

Vue使用$attrs与$listeners实现多层嵌套传递 – 掘金

vue $attrs的使用_随意花的博客-CSDN博客_$attrs

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/184411.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(2)
blank

相关推荐

  • String转成Json数组 JsonArray 保持有序

    String转成Json数组 JsonArray 保持有序接收上传的数据转成Json,希望数据保持原来的顺序,fastjson处理JsonArray会把顺序hash,可以使用Gson来转成Json,避免顺序改变。importcom.google.gson.JsonArray;importcom.google.gson.JsonParser;/***createbyLiuJinHe2019/9/20*/pu…

  • 人力资源管理系统详细设计说明书[通俗易懂]

    人力资源管理系统详细设计说明书[通俗易懂]人力资源管理系统详细设计说明书组名 : K2组员 : 罗猛、丘佩茵2021年1月12日目录1引言 31.1编写目的 31.2背景说明 31.3定义 31.4参考资料 32系统结构 42.1总系统结构图 42.2管理员登录注册模块结构图 42.3部门管理模块结构图 52.4员工管理模块结构图 52.5培训管理模块结构图 62.6招聘管理模块结构图 62.7奖惩管理模块结构图 72.8薪资管理模块结构图 72.9系统管理模块结构图 81.10查看消息模块结构图 83系

  • linux shell 循环处理文件夹每个文件

    linux shell 循环处理文件夹每个文件在linux下,如果有一个文件夹,下面有好几个文件。每个文件如abc.csv这种格式。我想一个个处理文件,并且取得前缀abc,生成新文件abc.text.代码如下。注意我这里采用的是把*.cnf处理成*.csvfeatureSAT12是我需要调用的程序,在DIMACS上一个文件夹。#!/bin/bashPATH=”DIMACS”//最好使用绝对路径cd$PATHfor

  • linux tcp发包工具_怎么用命令行查IP

    linux tcp发包工具_怎么用命令行查IPSendip是一个linux平台的命令行发数据包工具,目前(2018年2月)支持的协议有ipv4、ipv6、icmp、tcp、udp、bgp、rip、ntp,作者表示其他协议将会后面支持,当他有空写的时候。Sendip很强大,它支持自定义头部和数据(也就是IP层以上的整个包),没有过多的限制,所以连源IP都可以随意写,而且里面也提供了一些默认的选项,可以择需而发,非常方便。又因为它是命令行的,还支…

  • C++——string字符串类具体用法

    C++——string字符串类具体用法引言:C++ 大大增强了对字符串的支持,除了可以使用C风格的字符串,还可以使用内置的 string 类。string 类处理起字符串来会方便很多,完全可以代替C语言中的字符数组或字符串指针。string 是 C++ 中常用的一个类,它非常重要,我们有必要在此单独讲解一下。定义使用 string 类需要包含头文件,下面的例子介绍了几种定义 string 变量(对象)的方法:#include…

  • Mac录屏同时录制系统声音和画外音(Soundflower无法安装解决方案)「建议收藏」

    Mac录屏同时录制系统声音和画外音(Soundflower无法安装解决方案)「建议收藏」个人博客地址:xzajyjs.cn前言以前一直有录屏的需求,但苦于自带的QuickTime无法录制内屏声音,一直使用的是第三方的app。近期开腾讯会议需要录屏,但主持人本身没有开启录屏权限,只好通过我本机端进行录制。然后我使用的第三方app虽然能录制系统声音,但无法录制腾讯会议的声音,录了一个半小时竟然是哑剧!一怒之下删掉了原来的那个app,重新探寻QuickTime录屏之路。网上一番寻找,很多教程都说要安装Soundflower这个音频插件,但在他们的github逛了一圈后发现这个插件早就停止维

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号