First, the use of scenarios
1. Features of traditional components:
2. Conventional components can only render components in designated places, which is limited in some special scenes, such as:
Second, usage
When creating a Vue instance, there is always an option el to specify the root node of the instance. If the el option is not written, the component is in an uninstalled state. The function of Vue.extend is to create a subclass based on the Vue constructor. Its parameters are basically the same as those of new Vue, but data is a function like a component. With $mount, components can be rendered and mounted to any specified node, such as body.
To achieve the same effect, in addition to using extend, you can also create an instance of Vue directly and use the Render function to render a. vue component. In this way, you can use. Vue to write complex components, you can also pass in appropriate props as needed. After rendering, manipulating rendering instances is also very simple.
It should be noted that the components manually rendered by mount need to be destroyed by $destroy before the instance can be destroyed manually. If necessary, you can use removeChild to remove nodes from DOM.
Third, actual combat 1- How to dynamically render components? Vue file
1. Interface design: general. Vue file contains three parts, template, script and style. When using extend to construct a component instance, its option template corresponds to
realize
(1) Create a display directory and create a new display.vue file.
(2) The code passed by the parent is divided and stored in html, js and css of the data.
(3) this.js is a string, which can be converted into an object type through new Function(this.js).
(4) Construct an instance with extend and install it on the node of the component.
(5) Loading css means creating a style tag, then writing css in it and inserting it into the page header. When this code changes or the component is destroyed, a random id is added to each style tag for identification in order to remove the dynamically created style tag.
(6) Manually destroy the instances created by extend and css in the beforeDestroy hook.
3. What can this dynamically presented display component be used for?
For example, to write a set of Vue component library documents, the traditional method is to write a. vue file in the development environment, then compile and package it, upload resources and go online. If you want to correct even one punctuation mark, you must go online again. But for the display component, you only need to provide a service to modify it. Vue files are online and can be updated in real time, without packaging, uploading and online.
It can also be used as a website to write examples online and run in real time.
Fourth, actual combat 2-how to call components through commands.
To be perfected ...