Question

在我正在进行的项目中，我们有许多通知栏，例如

不生成消息我正在使用这种方法。

是HTML部分：

<template>
  <div>

    <div class="col-md-12">
      <div class="alert alert-success alert-dismissible" v-if="registration.isFinished">
      <button type="button" data-dismiss="alert" aria-hidden="true" class="close">×</button> 
      <h4><i class="icon fa fa-check"></i> {{ success.msg }} user "{{ field.user.name }}" created! </h4>
       <h4><i class="icon fa fa-check"></i> {{ success.desc }} user "{{ field.user.name }}" created!

      Click  <router-link to="/profile">Here</router-link> to view your new profile </div>
    </div>

  </div>
</template>

您可以看到我正在使用registration.isFinished来显示成功消息，之后会显示success.msg和success.desc。

现在这是JS版本。

export default {
  data () {
    return {
      registration : {
        isFinished: false; 
      },
      success: {
        msg: '',
        desc: ''
      }
    }
  },

  methods: {
      registerUser() {
        // if user is registered 
        this.registration.isFinished = true
        this.success.msg = 'Congratulations'
        this.success.desc = 'Your account has been created'  
      }
  }
}

现在，如果这只是为了在一个组件上显示一条消息，那就没关系..但我还有其他通知，例如：错误，信息......以及我的所有页面。所以，我的应用程序中有很多重复的内容。

有没有办法尽量减少代码重复？我知道答案在于制作组件，但我不确定如何完成

Answer 1

你确实需要制作一个“警报组件”。

这是它的工作原理：

<template>
    <div>
        <div class="alert alert-dismissible" :class="'alert-' + type">
            <h4>{{ title }}</h4>
            <slot></slot>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            title: {
                type: String, 
                required: false
            },
            type: {
                type: String,
                required: false,
                default: 'success'
            }
        }
    }
</script>

这就是你在其他组件中使用它的方式：

<template>
    <div>
        <alert title="The title of my component" type="success">
            The content of my alert
        </alert>
    </div>
</template>

<script>
    import Alert from './Alert.vue'

    export default {
        components: {
            Alert
        }
    }
</script>

如您所见，Alert组件接受两个道具，标题和类型。由于组件中的:class="'alert-' + type"，该类型将定义警报颜色。

我希望你能做到这一点

在为vuejs创建消息通知时，如何避免代码重复

1 个答案: