本文主要是介绍v-bind后面不加属性和v-bind的动态属性，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
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>这篇关于v-bind后面不加属性和v-bind的动态属性的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
