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

This article introduces the knowledge of "how to use vue dynamic component component". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

1 、 component

How to realize dynamic component rendering

Vue provides a built-in dedicated rendering of dynamic components.

This tag is equivalent to a placeholder, and you need to use the is attribute to specify the bound component

Show Left Show Right import Left from'@ / compeonents/Left.vue' import Right from'@ / components/Right.vue' export default {components: {Left, Right} Data () {return {/ / comName represents the name of the component to be displayed comName: Left,}

2. Problems existing in keep-alive2.1.

When a button plus one function is implemented in the Left component, the component is switched after adding one operation, and then cut back

The following is the add-on function in Left

Left component-{{count}} + 1 export default {data () {return {count: 0}

Operation, switch to the right component after adding one operation, and then switch back, and find that the data in the component has been rewritten and initialized

Use the lifecycle of Vue to view Left components

The following is the addition of lifecycle functions to Left

Export default {created () {console.log ('Left component created!') }, destoryed () {console.log ('Left component is destroyed ~')}}

After performing the appeal operation again, the results are as follows:

Problem: components will be destroyed and created while switching components, so that the component objects will not be the same each time you switch to the same component, and the initialization data will be rewritten.

2.2 using keep-alive solution

The keep-alive component is also a built-in component of Vue and can be used directly

Modify the following in the App root component:

Life cycle of 2.3keep-alive

This lifecycle can be used only if the component uses keep-alive

Deactivated automatically triggers when a component is cached

Actived automatically triggers when a component is activated

Add the following modifications to the Left component

/ / when a component is created for the first time, created is triggered first, and then activated// is triggered. When the component is activated, only activated is triggered, not createdactivated () {console.log ('component is activated, activated')}, deactivated () {console.log (' component is cached, deactivated')}.

Include, exclude attributes of 2.4keep-alive

Keep-alive caches all components in component wrapped by keep-alive by default

How to specify the components that need to be cached:

Use the include / exclude attribute, not both

The above specifies the name of the component to be cached: note the name of the component here

In the Left component:

Export default {}

In the Right component:

Export default {/ / when the name attribute is provided, the name of the component is the value of the name attribute name: 'MyRight'}

Distinction: the relationship between the name attribute within the component and the registration name outside the component

Outside the component:

Import Left'@ / components/Left.vue'components: {Left,}

The registration name here is only used for the reference of the component. If there is no name attribute in the component, then name is the registration name by default.

Within the component:

Export default {/ / when the name attribute is provided, the name of the component is the value of the name attribute name: 'MyRight'}

The name attribute is declared in the component. This is the name of the tag displayed by the component in the debugger, and it is also used by the caching function in the tag.

This is the end of the content of "how to use vue dynamic component component". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.