首页 > 其他分享> 文章详细

$attrs和$listeners

2021-05-23 14:05:06 阅读：209 来源： 互联网

标签：50% refresh 传递 listeners attrs props 组件

$attrs：从父组件中接收到的，没有注册到props中的值，传递给子组件使用

$listeners：将子组件的自定义事件传递给父组件

如图所示，A、B、C、D四个组件的关系就是一级一级的父子关系

A组件将x传递给B使用，将y传递给C使用，将z传递给D使用并且B不需要使用y和z，C也不需要使用z，如何实现？

B组件中用props接收x，通过 v-bind="$attrs" 将剩下的y和z传递到C中

C组件中用props接收y，就可以使用y了，同时也可以通过 v-bind="$attrs" 将剩下的z传递到D中

D组件中用props接收z，就可以使用z了

在上面的过程中，如果B中通过 :x='x' 将x传给了C，那么C中也可以通过props接收到x值进行使用，同理，C可以将x传递给D。这就是通过props一层一层往下传就行了，但是如果说A中的数据（z）B、C都不需要使用，只有D需要使用，那么在B、C中不要在props中接收，分别加上 v-bind="$attrs"，D中通过props就可以拿到A中的z

那如果要从C传递一个值到A中，怎么操作呢？

在A中定义一个自定义事件用于接收子孙组件传来的值 @refresh="handleRefresh"，在C中通过 $emit 去触发 refresh 事件，这显然是不行的

但是在B中加上 v-on="$listeners"，那么C就可以触发A中的 refresh 事件了

同理，在C中加上 v-on="$listeners"，那么D也可以通过 $emit 触发 refresh 事件

A：

<template>
  <div class="a">
    A组件
    <p>x：{{ x }}</p>
    <p>y：{{ y }}</p>
    <p>z：{{ z }}</p>
    <B :x="x" :y="y" :z="z" @refresh="handleRefresh"></B>
  </div>
</template>
<script>
import B from './B'
export default {
  data() {
    return {
      x: 'xxx',
      y: 'yyy',
      z: 'zzz'
    }
  },
  methods: {
    handleRefresh(data) {
      console.log('刷新', data)
    }
  },
  components: { B }
}
</script>
<style lang="less" scoped>
.a {
  width: 700px;
  height: 700px;
  background-color: red;
}
</style>

View Code

B：

<template>
  <div class="b">
    B组件
    <p>A组件x：{{ x }}</p>
    <C :x="x" v-bind="$attrs" v-on="$listeners"></C>
  </div>
</template>
<script>
import C from './C'
export default {
  props: ['x'],
  components: { C }
}
</script>
<style lang="less" scoped>
.b {
  width: 400px;
  height: 400px;
  background-color: gold;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>

View Code

C：

<template>
  <div class="c">
    C组件
    <p>A组件x：{{ x }}</p>
    <p>A组件y：{{ y }}</p>
    <button @click="handleBtn">按钮</button>
    <D v-bind="$attrs" v-on="$listeners"></D>
  </div>
</template>
<script>
import D from './D'
export default {
  methods: {
    handleBtn() {
      this.$emit('refresh', 'CCC')
    }
  },
  props: ['x', 'y'],
  components: { D }
}
</script>
<style lang="less" scoped>
.c {
  width: 250px;
  height: 250px;
  background-color: greenyellow;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>

View Code

D：

<template>
  <div class="d">
    D组件
    <p>A组件z：{{ z }}</p>
    <button @click="handleBtn">按钮</button>
  </div>
</template>
<script>
export default {
  methods: {
    handleBtn() {
      this.$emit('refresh', 'DDD')
    }
  },
  props: ['z']
}
</script>
<style lang="less" scoped>
.d {
  width: 100px;
  height: 100px;
  background-color: deeppink;
}
</style>

View Code

标签：50%,refresh,传递,listeners,attrs,props,组件
来源： https://www.cnblogs.com/wuqilang/p/14801027.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

$attrs和$listeners