Vue组件隔代通讯$props

今天学习了Vue中特别有趣的组件隔代通讯，按耐不住心中的小激动，这就给大家分享一下！

场景如下：

父组件通过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--------------------