vue.js组件两三事

基础：vue.js组件的三个API:prop、event、slot

组件的构成

一个再复杂的组件，都是由三部分组成的：prop、event、slot它们构成了vue.js组件的API。

属性 prop

 prop定义了一个组件有哪些可配置的属性，组件的核心功能也都是由它来确定的。在写组件的时候，最好用对象的写法。这样的好处是可以针对每个属性设置类型、默认值和自定义校验属性的值。

通过封装一个<i-button>按钮组件来认识和了解一下prop

<template>
  <div>
    <button :class="'i-button-size' + size" :disabled="disabled"></button>
  </div>
</template>

<script>
function oneOf(value, validList) {
  for(let i = 0; i < validList.length; i++) {
    if (value === validList[i]) {
      return true
    }
  }
  return false
}

export default {
  name: 'iButton',
  props: {
    size: {
      validator(value) {
        return oneOf(value, ['size', 'default', 'large'])
      },
      default: 'default'
    },
    disabled: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style scoped>

</style>

组件中定义了两个属性：尺寸 size 和 是否禁用 disabled。其中 size 使用 validator 进行了值的自定义验证，也就是说，从父级传入的 size，它的值必须是指定的 small、large、default 中的一个，默认值是 default，如果传入这三个以外的值，都会抛出一条警告。

要注意的是，组件里定义的 props，都是单向数据流，也就是只能通过父级修改，组件自己不能修改 props 的值，只能修改定义在 data 里的数据，非要修改，也是通过后面介绍的自定义事件通知父级，由父级来修改。

在使用组件时，也可以传入一些标准的 html 特性，比如 id、class。这个特性是默认开启的，如果不需要开启在组件选项里配置 inheritAttrs: false 就可以禁用了。

插槽slot

如果想要给上面的按钮添加一些文字内容，就要用到组件的第二个API slot了。slot的作用就是给组件扩展一些内容。

<template>
  <div>
    <button :class="'i-button-size' + size" :disabled="disabled">
      <slot></slot>
    </button>
  </div>
</template>

当需要多个插槽时，会用到具名 slot，比如上面的组件我们再增加一个 slot，用于设置另一个图标组件：

<template>
  <div>
    <button :class="'i-button-size' + size" :disabled="disabled">
      <slot name="icon"></slot>
      <slot></slot>
    </button>
  </div>
</template>

那么我们在父组件中使用的时候就可以这样使用：

<template>
  <div>
    <i-button size="default">
      <span name="icon"></span>
      按钮1
    </i-button>
  </div>
</template>

默认的slot也是可以写内容的，这样在父级没有写任何的slot时，它们就会出现。

事件event

<template>
  <div>
    <button :class="'i-button-size' + size" :disabled="disabled" @click="handleClick">
      <slot name="icon">123</slot>
      <slot></slot>
    </button>
  </div>
</template>

export default {
  name: 'iButton',
  methods: {
    handleClick() {
      this.$emit('on-change', 'hello vue.js')
    }
  }
}
</script>

<template>
  <div>
    <i-button size="default" @on-change="handleClick">
      <span name="icon"></span>
      按钮1
    </i-button>
  </div>
</template>

<script>
import iButton from '../components/button/button.vue'
export default {
  components: {
    iButton
  },
  methods: {
    handleClick(event) {
      console.log(event)
      console.log('hello vue.js')
    }
  }
}
</script>

以上这种方式是子组件$emit 父组件监听的方式进行事件的传播。还有一种是采用添加修饰符的方式直接监听原生组件中的事件。

<template>
  <div>
    <i-button size="default" @click.native="handleClick">
      <span name="icon"></span>
      按钮1
    </i-button>
  </div>
</template>

<script>
import iButton from '../components/button/button.vue'
export default {
  components: {
    iButton
  },
  methods: {
    handleClick(event) {
      console.log(event)
      console.log('hello vue.js')
    }
  }
}
</script>