vue中v-bind=“$attrs“和v-on=“$listeners“的含义（记录）

最新推荐文章于 2024-04-18 09:06:22 发布

carpe diem xt

最新推荐文章于 2024-04-18 09:06:22 发布

阅读量334

点赞数

分类专栏： my_vue 文章标签： vue.js javascript 前端

原文链接：https://blog.csdn.net/weixin_40825228/article/details/114700505

版权

my_vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

**一、**加入自定义了组件B componentB; 在componentA中引用 B,并使用props接收了两个参数，比如：name、age, 在A中这样调用B

<componentB
  :name='_name'
  :age='age'
  :phone='phone'
  @study='study'
/>

**二、**如果componentB 又调用了组件C componentC，若componentC想获取从componentA中没有被componentB的props接收的参数，componentB的如下：

<template>
  <div v-bind="$attrs" v-on="$listeners"></div>
  <componentC />
</template>
<script>
export default {
   indeterminate: true,
   props: {
     name,
     age
   }
 }

**三、**在组件C中就可以这样调用（可以通过vm. $a t t r s 获取祖先组件传输的数据, 通过 v m .$ listeners获取祖先节点的methods）

export default {
  mounted () {
    // 访问ComponentA传入的`phone`, ComponentB的props并未接收
    console.log(this.$attrs.phone)
    // 触发ComponentA绑定`study`事件, 并非ComponentB emit的
    this.$emit('study')
  }