Vue 的 v-bind 属性的妙用

自定义组件

这个是在 Vue 里，自定义组件，传入属性，非常常见的写法。

<person
  :name="name"
  :sex="sex"
  :height="height"
  :beforeCreate="beforeCreate"
/>
<script>
export default {
    data () {
    return {
        name: '王二',
      sex: 1,
      height: 155
    }
  },
  methods: {
    beforeCreate (person) {
      person.name = person.name + '同学'
      return person
    }
  }
}
</script>

用了 v-bind 之后，就可以省略成这样:

<person v-bind="{ name, sex, height, beforeCreate }"/>

可以少写一个单词。

二次封装组件库组件

在平时封装组件的时候，有时候是对组件库的组件封装，比如我想封装一个 my-button， 让其默认变成主要按钮，可能就是这样写。（这里实验 el-button）

<template>
    <el-button :type="type">
    <slot />
  </el-button>
</template>
<script>
export default {
  name: 'my-button',
    props: {
    type: {
      type: String,
      default: 'primary'
    }
  }
}
</script>
// 用的时候就是主要按钮了
<my-button>默认</my-button>

那其它要用的属性怎么办呢？

<my-button icon="el-icon-check" circl>默认</my-button>

如果要保持 el-button 其它属性的话，就可以这样:

<el-button type="type" v-bind="$attrs">
  <slot />
</el-button>
// 有效
<my-button icon="el-icon-check" circle>默认</my-button>

这样子，其它没有写的属性就默认基础的 el-button 了。

总结

• v-bind 可以省略属性。
• v-bind="$attrs" 可以继承属性。