How to use vue dynamic component component
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!
