$attrs

15 篇文章 0 订阅

 vue2

​​​​​​透传 Attributes 是指由父组件传入,且没有被子组件声明为 props 或是组件自定义事件的 attributes 和事件处理函数。

1.含义:父组件向子组件传的参数,未被子组件的props接收,都会在$attrs中出现

//父组件A
<template>
  <div class="a">
    <div>A: {{a}}</div>
    <B class="a-b" :b="a" :c="'1'" :d="'2'" ></B>
  </div>
</template>


//子组件B
<template>
  <div class="b">
    <div>B: {{ b }}</div>
    <div>C: {{ $attrs.c }}</div>
    <C v-bind="$attrs"></C>
  </div>
</template>
<script>
import C from "./C.vue";
export default {
  name: "",
  inheritAttrs: true, //去除子组件根节点的绑定,但依然可以用$sttrs访问到,且可用v-bind="$attrs"继续向下传递
  props: {
    b: Number,
  },
  components: {
    C,
  },
  data() {
    return {};
  },

  created() {
    console.log("attr: ", this.$attrs); //attr:  {c: '1', d: '2'}
  },

};
</script>



//子组件C
<template>
  <div class="c">
    C: {{$attrs.c}}
  </div>
</template>

页面显示

 

2.inheritAttrs

可以在父组件设置属性、传参等,子组件的根元素会默认继承。如果想要去除绑定,可以使用inheritAttrs

在 B组件页面内有描述,作用:设置false, 可去除子组件根节点的绑定,但依然可以用$attrs访问到,且可用v-bind="$attrs"继续向下传递

inheritAttrs=true

 inheritAttrs=false

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值