Previous Note:
Version restrictions:
2.0+
1.0 cannot be used
Impatience, only caring about what it is. If you want to know what it is probably generated after obtaining it, you can directly read the summary at the end
Non-using render method
Complete code:
<!DOCTYPE html> <html> <head> <title>VueofrenderMethod Description</title> <script src="/[email protected]/dist/"></script> </head> <body> <div > <child :level="1">Hello world!</child> </div> <script type="text/x-template" > <div> <h1 v-if="level === 1"> <slot></slot> </h1> <h2 v-if="level === 2"> <slot></slot> </h2> <h3 v-if="level === 3"> <slot></slot> </h3> <h4 v-if="level === 4"> <slot></slot> </h4> <h5 v-if="level === 5"> <slot></slot> </h5> <h6 v-if="level === 6"> <slot></slot> </h6> </div> </script> <script type="text/javascript"> ('child', { template: '#template', props: { level: { type: Number, required: true } } }) new Vue({ el: "#app" }) </script> </body> </html>
Code description:
- The new Vue method at the bottom is obvious. It is a new Vue instance, and the mount point is the dom "#app"
- In this part of the code, the first parameter indicates that a Vue component is registered, and the tag name is child (that is, the <child> tag will be replaced);
- In the second parameter, the template attribute indicates the tag with id="template" (note that this tag is script, div, template, or other, and has no effect), and then use this tag as the component template.
- props represents the variable passed to this component. The value of the variable level is equal to 1 through the form v-bind:level in the label. The way to write it here is to limit the variable type to number and force it to
- slot means content distribution. Specifically, it is to replace the content in the source html tag of the component (such as the content in the <child> tag, which does not contain the <child> tag itself, here is Hello world!), and is posted at the location of the <slot> tag (that is, placed in a tag like <h1>``````<h2>).
- If you don't understand it yet, you can run the code to view the results, or read the official documentation of vue
- In general, the order is as follows: register a component, this component has a template, and there is a variable in this template. The value of the variable is passed through the parent component. Then, according to the value of the variable, the corresponding html tag content is displayed through the v-if command, and then use this component in the parent component to let the child component display the content that needs to be displayed.
There is a flaw in this code, which is that it requires writing a lot of repeated code, such as from <h1> to <h6> in total. If such a template is more complicated, such as the <hx> tag, there are many other contents, which are obviously very troublesome, neither beautiful nor easy to use.
The situation of using render method
The solution is to render method, all the codes are as follows:
<!DOCTYPE html> <html> <head> <title>VueofrenderMethod Description</title> <script src="/[email protected]/dist/"></script> </head> <body> <div > <child v-bind:level="2">Hello world!</child> </div> <script type="text/javascript"> ('child', { render: function (createElement) { return createElement( 'h' + , // tag name tag namethis.$ // Array in subcomponents) }, props: { level: { type: Number, required: true } } }) new Vue({ el: "#app" }) </script> </body> </html>
Code description:
1. There are two differences between the code here and the above:
First, there is no explicit template content, but it is generated through the render method;
Second, the createElement method is used
2. Regarding the createElement method, it is passed in through the parameters of the render function. This method has three parameters.
The first parameter is mainly used to provide the dom's HTML content, and the type can be a string, object, or function. For example, "div" is to create a <div> tag
The second parameter (type is an object) is mainly used to set some styles, properties, parameters of passed components, binding events, etc. For details, please refer to the description of this section in the official document.
The third parameter (type is an array, and array element type is VNode) is mainly used to say that there are other nodes under this node, so it is placed here.
For example, if there is a tag <slot> that needs to be distributed, it is obtained through this.$. Perhaps there are other components and other components that may need to be used, and it should be placed here as well.
My initial understanding is that in the place where it was originally replaced, for example, the <child> tag in the above code, each secondary tag below it is an element, and placed in this.$ array. For example, in the above, there is only one element in this array, but the following code:
<child v-bind:level="2"><div>Hello</div><div> world!</div></child>
There are two elements in this array, namely <div>Hello</div> and <div> world!</div>. For example, this.$[0] represents the first tag.
In addition, if there are spaces, line breaks, etc. in the middle of these two elements, then there are three elements in the array, and that space and line breaks are the second element. This property is a bit similar to the childNodes attribute of dom. It is not simply considered a child node by tags. (But note that it is not exactly the same)
Sometimes, we may want to add other components inside, such as registering the abc component inside. So, we must first register this abc component, and then create abc component in an array through createElement. Only the abc tag created in this way can be used by the abc component. It is not possible to simply enter the string "<abc></abc>" this way.
As the following code is feasible: (Add other components in the template generated by the render method)
<!DOCTYPE html> <html> <head> <title>VueofrenderMethod Description</title> <script src="/[email protected]/dist/"></script> </head> <body> <div > <child v-bind:level="2"> <div>Hello</div><div> world!</div> </child> </div> <script> ('abc', { template: "<div>abc</div>" }) ('child', { render: function (createElement) { (this.$slots) return createElement( 'h' + , // tag name tag name[this.$[0], createElement("abc"), this.$[1]] // Array in subcomponents) }, props: { level: { type: Number, required: true } } }) new Vue({ el: "#app" }) </script> </body> </html>
The results are:
Hello
abc
world!
Finally, if you want to use all the original content (rather than just taking part of the label), then just use this.$ as the third parameter, which itself is an array.
3. In short, the function of the createElement method is to dynamically create a dom for rendering by the render function. Parameter 2 and Parameter 3 can be optionally omitted, Parameter 2 is used to set the style, properties, events, etc. of the dom, and Parameter 3 is used to set the distributed content, including other newly added components.
If you understand it roughly, it can be understood as: createElement (label name, label attribute, content in the label)
In this way, we have all the contents needed for a component template
Summarize
1. The essence of the render method is to generate a template template;
2. Generate by calling a method, and this method is passed to it through the parameters of the render method;
3. This method has three parameters, respectively, providing the tag name, tag related attributes, and the html content inside the tag
4. Through these three parameters, you can live a complete template.
Remark:
1. The render method can use JSX syntax, but requires the Babel plugin;
2. The third parameter in the render method can use a function to generate multiple components (especially if they are the same), as long as the result is an array and the array elements are all VNodes.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.