在 AppNotification 组件里面可以显示一些通知提示信息，我们可以给这个通知提示信息单独再去创建一个组件。回到项目，先打开 app-notification 组件，在组件里面手工添加一个数据，名字叫 messages ，它的值是一个数组，数组里的每个项目都是一个对象。

这个对象数据就是提示信息组件里需要用的一些数据。它应该有一个 id 属性，还有 content 属性，对应的值就是要显示的信息内容。还可以添加一个 icon 属性，用它设置要使用的小图标。 用同样的方法，可以再添加两个信息对象。每个对象里都有 id，content 属性， 如果忽略 icon 属性，在通知提示信息组件里可以显示一个默认的小图标。

AppNotificationMessage

下面去创建一个组件，放在 src/app/notificaiton/components 的下面，名字是 app-notification-message.vue， 在这个文件里定义一个组件，组件的名字叫 AppNotificationMessage。

在组件的模板里的这个包装元素上面，可以添加一个类，名字是 app-notificaiton-message 。等会儿用这个类可以设计一下这个组件的样式。

在组件里声明一个属性，属性的名字叫 message，这个属性值的类型是 Object。

继续编辑这个组件模板，添加一个 div，上面加上 icon，里面可以包装一个小图标。 下面再添加一个 div，加上 content 这个类，它里面包装的是信息内容。这里可以绑定输出 message 里的 content 。

在组件里导入使用 AppIcon ，位置是 @/app/components/app-icon ，在组件的 components 里面，添加一个 AppIcon。

然后在组件的模板里再用一下这个 AppIcon，把它放在这个带 icon 类的元素里面。绑定一下它的 name 属性，值可以设置成 messageIcon。

在这个组件里添加一个 computed 属性，名字叫 messageIcon，它返回的值就是要显示的小图标的名字。 return 的东西可以先判断一下 this.message.icon 有没有值，如果有，就返回 this.message，如果没有就返回一个 info ，也就是 info 是默认显示的小图标。

AppNotification

在 AppNotification 这个组件里面，用一下刚才我们定义的这个组件，导入 AppNotificationMessage，位置是当前目录 components 下面的 app-notification-message

在组件的 components 里面，要添加一个 AppNotificationMessage 。然后在组件的模板里再用一下这个组件，AppNotificationMessage，在这个组件上，用一下 v-for 指令循环一组数据， message in messages， 绑定 :key 属性，值可以设置成 message 里的 id 这个属性的值。再绑定一下 message 属性，对应的值就是当前被循环的这个项目，这里就是 message 。

预览

回到浏览器预览一下，现在页面右下角会显示一组通知提示信息。