如何使用Vue和Element-UI实现消息通知功能

npm install vuenpm install element-ui

import Vue from 'vue'import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'Vue.use(ElementUI)new Vue({  el: '#app',  render: h => h(App)})

<template>  <div class="notification">    <el-notification      v-for="message in messages"      :key="message.id"      :title="message.title"      :message="message.content"      :type="message.type"      :duration="3000"      @close="removeMessage(message.id)"    ></el-notification>  </div></template><script>export default {  data() {    return {      messages: []    }  },  methods: {    addMessage(title, content, type) {      this.messages.push({        id: new Date().getTime(),        title,        content,        type      })    },    removeMessage(id) {      this.messages = this.messages.filter(message => message.id !== id)    }  }}</script>

<template>  <div class="app">    <button @click="showInfo">显示消息通知</button>    <Notification ref="notification"></Notification>  </div></template><script>import Notification from './Notification.vue'export default {  methods: {    showInfo() {      this.$refs.notification.addMessage('消息通知', '这是一条信息', 'success')    }  },  components: {    Notification  }}</script>