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>