vue组件开发props，computed和$emit使用

<template>
  <transition name="dropdown" v-if="!closed">
    <div :class="classes">
      <Icon :type="icon" v-if="showIcon" />
      <a class="k-alert-close" v-if="closable" @click="close"></a>
      <slot></slot>
    </div>
  </transition>
</template>
<script>
import Icon from "../icon";
export default {
  components: { Icon },
  name: "Alert",
  props: {
    type:{type:String,default:'error'},
    closable: Boolean,
    showIcon: Boolean
  },
  data() {
    return {
      closed: false
    };
  },
  computed: {
    icon() {
      let icons = {
        info: "ios-information-circle",
        error: "ios-close-circle",
        success: "ios-checkmark-circle",
        warning: "ios-alert"
      };
      return icons[this.type];
    },
    classes() {
      return [
        "k-alert",
        {
          [`k-alert-${this.type}`]: this.type
        }
      ];
    }
  },
  methods: {
    close() {
      this.closed = true;
      this.$emit("close");
    }
  }
};
</script>

如上代码，

1. vue组件开发时，设置props为组件的属性，组件被父组件调用时，传入参数给props，

2. 通过computed中的方法接受父组件传进来的参数，通过不同参数设置组件的不同样式；

3. $emit用于向父组件发送一个事件，比如子组件被点击，通过$emit向父组件发送一个函数名，并传递参数给该函数，父组件通过该函数名执行相应方法。