在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--------------------