Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being mutated: “type”

出现错误的代码

<template>
  <div class="yu-message" :class="[customClass,]">
   <div class="message" :class="[type,{show:isShow.default},{center:center}]">
     <i class="icon iconfont"
        :class="[iconClass,]"
        v-if="iconClass"></i>
     <i v-else
        :class="['icon','iconfont',icons[type]]"></i>
     <div class="content" ref="content">
       {{message}}
     </div>
     <i class="close iconfont icon-close"
        v-if="showClose"
        @click="close"></i>
   </div>

    <div class="message-btn" @click="click">
      <slot/>
    </div>
  </div>
</template>

<script>
export default {
  name: 'YuMessage',
  props: {
    message: String,
    iconClass: String,
    type: {
      type: String,
      default: 'info',
    },
    duration: {
      type: Number,
      default: 3,
    },
    customClass: String,
    dangerouslyUseHTMLString: Boolean,
    center: Boolean,
    showClose: Boolean,
  },
  data() {
    return {
      icons: {
        success: 'icon-check-circle',
        info: 'icon-information',
        warming: 'icon-warning-circle',
        error: 'icon-close-circle',
      },
      isShow: {
        type: Boolean,
        default: false,
      },
    }
  },
   mounted() {
    this.iconClass ? this.type = '' : '';
    if (this.dangerouslyUseHTMLString) {
      this.$refs.content.innerHTML = this.message
    }
  },
  methods: {
    click() {
      this.isShow.default = !this.isShow.default;
      if (this.duration !== 0) {
        setTimeout(() => {
          this.isShow.default = false;
        }, this.duration * 1000)
      }
    },
    close(event) {
      this.isShow.default = !this.isShow.default;
      this.$emit('click', event);
    },
  },
}
</script>

修改之后不报错的代码

 mounted() {
    if (this.dangerouslyUseHTMLString) {
      this.$refs.content.innerHTML = this.message
    }
  },
  computed: {
    change() {
      this.iconClass ? this.type = '' : '';
    },
  },