Vue组件隔代转发$props

在Vue2中,父组件通过v-bind将数据传给子组件,子组件再通过v-bind="$props"可以一次性将所有的props传递给下一级组件,神奇极了!

示例代码:

# 父组件, 稀松平常
<template>
  <div>
    <InfoComp :name="name" :age="age" :city="city" />
  </div>
</template>

<script>
import InfoComp from '@/components/info-comp.vue'

export default {
  components: { InfoComp },
  data() {
      return {
          name: "张三",
          age: 22,
          city: "北京"
      }
  }
}
</script>
# 子组件, 关键点在 v-bind="$props"
<template>
  <div>
    <MsgComp v-bind="$props" />
  </div>
</template>

<script>
import MsgComp from '@/msg-comp.vue'

export default {
    components: { MsgComp },
    props: ["name", "age", "city"]
}
</script>
# 底层组件
<template>
  <div>
    # 结果: 张三今年22岁,目前在北京
    <p>{{ `${name}今年${age}岁,目前在${city}` }}</p>
  </div>
</template>

<script>
export default {
  props: ['name', 'age', 'city']
}
</script>

End--------------------

     

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值