Shulou(Shulou.com)06/02 Report--

This article will explain in detail how to use dynamic components in Vue. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

I believe most of the dynamic components will be used in the development process, when we need to switch between different components, dynamic components can well meet our needs, the core of which is the use of component tags and is attributes.

Basic description / / vue child1 child2 child3 / / jsvar child1 = {template: 'content1',} var child2 = {template:' content2'} var child3 = {template: 'content3'} var vm = new Vue ({el:' # app', components: {child1, child2, child3}, methods: {changeTabs (tab) {this.chooseTabs = tab;}}) AST resolution

The interpretation is consistent with the previous articles, starting from the AST parsing phase, and the process will not focus on every detail, but will highlight what is different from the previous approach. In view of the differences in dynamic component parsing, focus on the processComponent, because of the existence of the is attribute on the tag, it will mark the final ast tree with the component attribute.

/ / parsing for dynamic components function processComponent (el) {var binding; / / get the value if corresponding to the is attribute ((binding = getBindingAttr (el, 'is') {/ / the component attribute el.component = binding;} if (getAndRemoveAttr (el,' inline-template')! = null) {el.inlineTemplate = true;}} is added on the ast tree

Render function

With the ast tree, the next step is to generate the executable render function based on the ast tree. Because of the component attribute, the generation process of the render function takes the genComponent branch.

/ / render function generation function var code = generate (ast,options); / / implementation of generate function function generate (ast,options) {var state = new CodegenState (options); var code = ast? GenElement (ast, state):'_ c ("div")'; return {render: ("with (this) {return" + code + "}"), staticRenderFns: state.staticRenderFns}} function genElement (el, state) {var code; / / dynamic component Branch if (el.component) {code = genComponent (el.component, el, state);}}

The processing logic for dynamic components is actually very simple. When there is no inline template flag (which will be discussed later), the only difference between the subsequent child nodes and ordinary components is that the first parameter of _ c is no longer a specified string, but a variable representing the component.

/ / processing for dynamic components function genComponent (componentName, el, state) {/ / when you have the inlineTemplate attribute, children is null var children = el.inlineTemplate? Null: genChildren (el, state, true); return ("_ c (" + componentName + "," + (genData$2 (el, state)) + (children? ("," + children):') + ")} comparison between ordinary components and dynamic components

The render function of ordinary components

"with (this) {return _ c ('div', {attrs: {" id ":" app "}}, [_ c (' child1', [_ v (_ s (test))])], 1)}"

Render function of dynamic component

"with (this) {return _ c ('div', {attrs: {" id ":" app "}}, [_ c (chooseTabs, {tag:" component "})], 1)}"

To sum up, the difference between dynamic components and ordinary components is:

The component attribute has been added to the ast phase, which is the flag of dynamic components.

In the render function generation phase, due to the existence of the component attribute, the genComponent branch will be executed. GenComponent will perform special processing for the execution function of the dynamic component. Unlike ordinary components, the first parameter of _ c is no longer an immutable string, but the specified component name variable.

The process of the render to vnode phase is the same as that of a normal component, except that the string is replaced with a variable and has a data attribute of {tag: 'component'}. In the example, chooseTabs takes child1 at this time.

Dynamic components in the form of factory functions

You can also use dynamic components in the form of factory functions:

Const AsyncComponent = () = > ({/ / the component to be loaded (which should be a `Promise` object) component: import ('. / MyComponent.vue'), / / the component used when the asynchronous component is loaded is loading: LoadingComponent, / / the component used when loading fails, error: ErrorComponent, / / shows the delay time of the component when loading. The default value is 200 (milliseconds) delay: 200, / / if a timeout is provided and the component has timed out, / / the component that was used when the load failed. The default value is: `Infinity` timeout: 3000}); components: {AsyncComponent,}. This is the end of the article on "how to use dynamic components in Vue". I hope the above content will be helpful to you so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.