Vue中v-bind=“$attrs”的使用方法

$attrs

主要用于组件之间的隔代传值。例如有 父组件A,子组件B,孙组件C 三个组件。
在A组件中传值给C,可直接在B中的C上设置v-bind="$attrs",然后在C组件中用prop接收,此时就直接把值传给了C。

用法如下:

组件A

<template>
  <bCom msg='123'/>
</template>

组件B

<template>
  <cCom v-bind="$attrs"/>
</template>

组件C

<template>
  <div>A传递过来的值:{{msg}}</div>
</template>

<script>
export default {
  name: 'cCom',
  props: {
    msg:{ //接收A传递的msg
      typeof:String,
      default:''
    }
  },
}
</script>

组件隔代通讯其它相关用法:

Vue中v-on=“$listeners“的使用方法https://blog.csdn.net/weixin_44594219/article/details/127259825?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22127259825%22%2C%22source%22%3A%22weixin_44594219%22%7Dvue2中EventBus的使用方法https://blog.csdn.net/weixin_44594219/article/details/127248681?spm=1001.2014.3001.5502

### Vue.js `v-bind=$attrs` 功能和用法 #### 解释 `$attrs` 在 Vue 组件中,当父组件向子组件传递属性时,默认情况下只有被声明为 props 的属性会被接收并处理。然而,在某些场景下,可能希望将未声明为 prop 的属性也传递给子组件或更深层次的后代组件。这时就可以利用 `$attrs` 对象。 对于非显式定义成 prop 的特性(除 class 和 style),它们会自动收集到名为 `$attrs` 的对象内[^2]。这意味着如果存在一些额外的数据绑定或是 HTML 属性并未通过 props 明确指定,则可以通过这种方式捕获下来,并进一步应用至目标元素之上。 #### 使用方法 为了使这些附加特性能作用于特定 DOM 节点或其他嵌套较深的组件实例上,可以在模板语法里采用如下形式: ```html <template> <!-- 子组件 --> <div v-bind="$attrs"> {{ message }} </div> </template> <script setup lang="ts"> import { defineProps } from 'vue'; defineProps({ message: String, }); </script> ``` 上述例子展示了如何在一个简单的子组件内部使用 `v-bind="$attrs"` 来继承来自父级的所有未知属性。注意这里并没有直接列出要绑定的具体键名,而是借助了特殊变量 `$attrs` 实现了一次性的批量赋值操作[^3]。 值得注意的是,即使不主动设置 `inheritAttrs:false` 配置项,只要运用到了 `v-bind="$attrs"`,那么默认行为也会受到影响——即不再把根节点视为唯一接受者;相反地,任何地方一旦指定了此指令,就相当于开启了“穿透模式”,允许后续子孙辈继续沿袭这份数据流直至终点站为止[^1]。 此外,在 Vue 3 中还可以配合组合 API 函数如 `useAttrs()` 获取当前组件接收到但尚未消费掉的那些属性集合,从而实现更加灵活多变的功能逻辑控制[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值