v-bind 平常常见的用法我们应该都知道，说一说 v-bind 的不常用的方式，第一个就是 v-bind 后面直接不添加任何属性，此时会将一个对象的所有  property  都作为  prop  传入

先看官网的说法案例：

父组件：

<template><div><h1>这是父组件</h1><son v-bind="sonObj"></son></div>
</template><script>
import son from './son'
export default {name: 'parent',components: { son },data () {return {sonObj: {name: 'son',age: 18}}}
}
</script><style>
</style>

子组件：

<template><div><h2>这是子组件</h2><div>名字是：{{name}}</div><div>年龄是：{{age}}</div></div>
</template><script>
export default {name: 'son',props: {name: {type: String,default: '我是默认值'},age: {type: Number,default: 0}}
}
</script><style>
</style>

下面来说一下 v-bind 的动态属性，例如 v-bind:[str]="sonObj" 的 str 会自动根据 data 里面的数据来充当属性

父组件：

<template><div><h1>这是父组件</h1><!-- str 是 data 里面的数据，data里面的 str 是 example，所以这里的 v-bind:[str] 等于 v-bind:example --><son v-bind:[str]="sonObj"></son></div>
</template><script>
import son from './son'
export default {name: 'parent',components: { son },data () {return {str: 'example',sonObj: {name: 'son',age: 18}}}
}
</script><style>
</style>

子组件：

<template><div><h2>这是子组件</h2><div>名字是：{{example.name}}</div><div>年龄是：{{example.age}}</div></div>
</template><script>
export default {name: 'son',props: {example: {type: Object,default: () => { }}}
}
</script><style>
</style>