上一节我们实现了写在模板里面的组件，还有一种组件比如message消息提示，它的使用要求比较灵活，不确定在什么组件中出现，所以不能写死在模板中，要使用js动态控制
这种组件就需要手动地实现挂载与卸载了，在开始之前需要做一下铺垫Vue.extend(options)，创建一个子类包含配置的选项
首先我们来构建一个消息的模板
<template> <div class="message"> <p>{{ message }}</p> </div> </template> <script> export default { name: "message", data() { return { message: "message", }; }, </script> 复制代码
然后再创建一个Message.js，用于渲染这个模板
import Vue from 'vue'; import Message from './Message.vue' export default function() { const MessageConstructor = Vue.extend(Message) const component = new MessageConstructor().$mount() document.body.appendChild(component.$el) } 复制代码
上面的最后一段代码，我们调用了 $mount 方法对组件进行了手动渲染，这里渲染之后的结果是一个Node节点，我们需要手动将它插入到document中
使用组件也很简单，导入并执行这个函数。我们来使用一个按钮触发这个消息渲染
<template> <div> <button @click="alert">消息</button> </div> </template> <script> import Message from './Message.js' export default { methods: { alert() { Message() } } } </script> 复制代码
来看下效果
还行，我们来继续完善一下，首先需要自动删除节点，我们要在出现提示之后一定时间内取消展示，思路也很简单，在mounted之后添加一个延时卸载Node节点的方法
mounted() { setTimeout(() => { // duration 后通过父级移除子元素的方式移除该组件实例和DOM节点 this.$destroy(true); this.$el.parentNode.removeChild(this.$el); }, this.duration); }, 复制代码
现在我们来考虑一下通过配置控制消息内容
- 调用组件时传入一个配置对象
- 在创建渲染实例时将参数传递进去，覆盖掉继承来的属性
对我们的Message.js稍加改造，让参数覆盖data选项
export default function(options) { const MessageConstructor = Vue.extend(Message) const component = new MessageConstructor({data: options}).$mount() document.body.appendChild(component.$el) } 复制代码
然后我们来使用一下，配合我们之前的表单校验一起试一下
<template> <div id="app"> <f-form :model="userForm" :rules="rules" ref="formRef"> <f-form-item label="用户名" prop="username"> <f-input v-model="userForm.username" placeholder="请输入用户名" /> </f-form-item> <f-form-item label="密码" prop="password"> <f-input type="password" v-model="userForm.password" placeholder="请输入密码" /> </f-form-item> <button @click="submit">提交</button> </f-form> </div> </template> <script> import FFormItem from './components/FFormItem.vue' import FInput from './components/FInput.vue' import FForm from './components/FForm.vue' import Message from './components/Message' export default { name: 'App', components: { FFormItem,FInput,FForm }, data() { return { userForm: { username: '', password: '' }, rules: { username: [ {required: true, message: '请输入用户名', tigger: 'blur'} ], password: [ {required: true, message: '请输入密码', tigger: 'blur'} ] }, username: '' } }, methods: { submit() { this.$refs.formRef.validate(valid => { if(valid) { Message({ message: '通过验证', duration: 5000 }) } else { Message({ message: '验证失败', duration: 2000 }) } }) }, }, } </script> 复制代码
可以看到时间、内容都已经生效了
然后为了使用方便我们可以在入口文件将Message挂载到Vue的原型上Vue.prototype.$message = Message，，然后其他组件内部再使用时就可以直接this.$message()
这里我们只实现了一个简单的message，他还可以有很多扩展方向，比如通知类型（根据类型控制message颜色样式不一样）或者内嵌icon等，我们在这就不说了，有了这个结构再去拓展就很简单了
