Vue $attrs和$listeners的使用_$attrs取不到值_weixin_49085046的博客-程序员秘密

技术标签： vue

A父、B子、C孙

组件传值的时候会用到A组件在B组件传递值，B组件会通过 $attrs获取到不在B组件props里面的所有属性，B组件通过在C组件上绑定 $attrs 和 $listeners 使C组件获取A组件传递的值并且可以调用在A组件那里定义的方法

多级组件嵌套需要传递数据时，通常使用的方法是通过vuex。但如果仅仅是传递数据，而不做中间处理，使用 vuex 处理，未免有点大材小用。为此Vue2.4 版本提供了另一种方法-- $ attrs/ $listeners

$ attrs：包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件。通常配合 interitAttrs 选项一起使用。

$ listeners：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件
例子：

// A组件
<template>
  <div class="home">
      <el-link type="primary" @click="change">测试vuex修改参数，其他页面响应式改变</el-link>
    <!-- $attrs和$listeners -->
    <Son :name="name" @change="change"></Son>
  </div>
</template>

<script>
import Son from '@/components/attrsListeners/son.vue'
export default {
  name: 'Home',
  components: {
    Son
  },
  data() {
    return {
      params: {},
      name: 'suzilong'，
       aa: '$attrs和$listeners用法'
    }
  },
  computed: {
    // ...mapGetters(["sidebar"])
    sidebar() {
      return this.$store.getters.sidebar
    }
  },
  methods: {
    change() {
      console.log(this.$store)
      // this.params = this.$store.getters.sidebar
      this.$store.dispatch("app/sideBar", "hello suzilong")
    }
  }
}
</script>

B组件：不使用props获取时，可以使用 $attrs获取。当使用props获取时，不可以使用 $attrs获取

//B组件
<template>
  <div>
    <div>第二级组件</div>
    <div>{
   { $attrs }}-----$attrs</div>  //{ "name": "suzilong" }
    <div>{
   { $attrs.name }}---第二级组件</div>  //suzilong
    <div>{
   { $attrs.aa}}---第二级组件</div>  //undefined
    <div>{
   { aa }}---第二级组件</div>   //$attrs和$listeners用法
    <Sun v-bind="$attrs" v-on="$listeners"></Sun>
  </div>
</template>
<script>
import Sun from '@/components/attrsListeners/sun.vue'
export default {
  name: 'Son',
  components: { Sun },
  props: {
    aa: {
      type: String,
      default: () => {
        return ""
      }
    }
  }
}
</script>

C组件获取A值并调取A组件方法

// C组件
<template>
  <div>
    <div>第三级组件</div>
    <button @click="btn">点击</button>
    <div>{
   { $attrs }}</div>  //{ "name": "suzilong" }
  </div>
</template>
<script>
export default {
  name: 'Sun',
  methods: {
    btn() {
      //调取A组件的事件
      this.$emit("change")
    }
  }
}
</script>

简单来说：$ attrs与$ listeners 是两个对象，$ attrs 里存放的是父组件中绑定的非 Props 属性，$ listeners里存放的是父组件中绑定的非原生事件

本文链接：https://blog.csdn.net/weixin_49085046/article/details/120144207

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

【C语言】指针与二维数组的结合(定义、赋值、输出)_AlanBlog的博客-程序员秘密

手机贴图:代码: 1 #include "stdio.h" 2 3 int main() { 4 5 int (*p)[4],i,j; 6 int a[5][4] = {{1,2,3,4},{5,6,7,8},{9,10,11,12},{13,14,15,16},{17,18,19, 20}}; 7 p = a; 8 ...

Python源代码剖析笔记3-Python运行原理初探_普通网友的博客-程序员秘密

Python源代码剖析笔记3-Python执行原理初探本文简书地址：http://www.jianshu.com/p/03af86845c95 之前写了几篇源代码剖析笔记，然而慢慢觉得没有从一个宏观的角度理解python执行原理的话，从底向上分析未免太easy让人疑惑。不如先从宏观上对python执行原理有了一个基本了解，再慢慢探究细节。这样或许会好非常多。这也是近...

WPF：AutoCompleteBox，一个自动完成的文本框_XBMY的博客-程序员秘密

WPF：AutoCompleteBox，一个自动完成的文本框 1、安装WPF工具包2、引用正确的命名空间3、将AutoCompleteBox添加到视图中4、自定义AutoCompleteBox5、在自定义类中使用AutoCompleteBox6、多字段搜索这个WPF工具包包括AutoCompleteBox控制室。顾名思义，它是一个自动完成文本框控件。在本文中，我们将展示如何安装工具包以及如何使用...

GridView隐藏列的问题（隐藏后可以进行数据操作）_gridview取隐藏列的值_leer923的博客-程序员秘密

在cs文件中多加一行代码，其思路如下：（1）设置一个css类： .hidden{display:none;} （2）随后在GridView的列编辑对话框中，对需要进行隐藏的列进行设置，分别设置FootStyle，HeaderStyle，ItemStyle的CssClass属性为“hidden”Ok，这样我们就实现了隐藏列的目的，同时又能保证对其进行数据绑定。

Egg 使用 Sequelize_我就是一个编程菜狗的博客-程序员秘密

npm install --save egg-sequelize mysql2在 config/plugin.js 中引入 egg-sequelize 插件exports.sequelize = { enable: true, package: 'egg-sequelize',};在 config/config.default.js 中编写 sequelize 配置config.sequelize = { dialect: 'mysql', host: '127.

graphpad画生存曲线怎么样去掉删失点_Graphpad 作图教程 | 这份超详细的生存曲线绘制指南，科研新手一看就会！..._塔图阿姆的博客-程序员秘密

肿瘤专业的小伙伴一定经常用到生存曲线，1928 年生存曲线(又称存活曲线)首次由美国生物学家雷蒙・普尔提出，它可以反映不同种群在每个年龄段生存的数目。1958 年，Edward L. Kaplan 和 Paul Meier 也首次在临床研究中提出了生存曲线的概念，又被称作 Kaplan-Meier 曲线，主要用来对各组患者的生存状况进行描述。而作图神器 graphpad prism 8.0 也可以...