Vue组件化（三）| 小册免费学

上一节我们实现了写在模板里面的组件，还有一种组件比如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);
},

现在我们来考虑一下通过配置控制消息内容

1. 调用组件时传入一个配置对象
2. 在创建渲染实例时将参数传递进去，覆盖掉继承来的属性

对我们的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等，我们在这就不说了，有了这个结构再去拓展就很简单了

本文正在参与「掘金小册免费学啦！」活动, 点击查看活动详情