In the last section, we implemented the component written in the template. There is also a component such as message message, which requires more flexibility. It is not sure what component appears in the template, so it can not be written in the template

Vue. Extend (options) creates a subclass that contains configuration options

First let’s build a message template

<template>
  <div class="message">
    <p>{{ message }}</p>
  </div>
</template>
<script>
export default {
  name: "message",
  data() {
    return {
      message: "message",
    };
  },
</script>
Copy the code

Message.js is then created to render the template

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)
}
Copy the code

In the last piece of code above, we manually render the component by calling the $mount method. The result is a Node Node, which we need to manually insert into the Document

Using a component is also simple, importing and executing this function. Let’s use a button to trigger the message rendering

<template> <div> < button@click ="alert"> </button> </div> </template> <script> import Message from './ message.js' export default { methods: { alert() { Message() } } } </script>Copy the code

So let’s see what happens

After mounted, add a delay to unmount a Node. / / Add a delay to uninstall Node

mounted() {
	setTimeout(() = > {
		After duration, the component instance and DOM node are removed by the parent removing the child element
		this.$destroy(true);
		this.$el.parentNode.removeChild(this.$el);
	}, this.duration);
},
Copy the code

Now let’s consider controlling message content through configuration

  1. A configuration object is passed in when the component is called
  2. Parameters are passed in when creating the render instance, overwriting the inherited properties

Modify our message.js so that parameters override the data option

export default function(options) {
  const MessageConstructor = Vue.extend(Message)
  
  const component = new MessageConstructor({data: options}).$mount()
  document.body.appendChild(component.$el)
}
Copy the code

And then we’re going to use it, and we’re going to try it out with the form validation that we did before

<template> <div id="app"> < F-form :model="userForm" :rules="rules" ref="formRef"> <f-form-item label=" user name" /> </f-form-item> <f-form-item label=" password" Prop ="password"> <f-input type="password" V-model =" userform. password" placeholder=" please input password" /> </f-form-item> <button @ click = "submit" > 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: 'Please enter user name ', tigger: 'blur'}], password: [{required: true, message:' Please enter password ', tigger: 'blur'} ] }, username: '' } }, methods: {submit() {this.$refs.formref.validate (valid => {if(valid) {Message({Message: 'verified ', duration: 5000})} else {Message({Message: 'validation failed ', duration: 2000})}})},},} </script>Copy the code

You can see that the time and content are already in effect

Prototype.$Message = Message, $this.$Message ();

Here we have implemented a simple message, which can be extended in many ways, such as notification types (message colors vary according to the type) or inline ICONS, etc. We will not talk about it here, but with this structure it is easy to extend

This article is part of the “Gold Nuggets For Free!” Event, click to view details of the event