Module 9 - diving deeper into components Flashcards
Why not register all components in app
- Can become a very long list
- Is global and can be used anywhere along the app which can hurt compartmentalization.
- app is loaded first and registering all components in app might cause a performance problem because all the components will be loaded with them.
How do we register components locally?
We need to first import the component we want into the component where we are going to register it and then add a new object in the config of the component called component and in it we specify which components can be used in this component. The key in the object is the html component name and the value is the component name itself which we imported. We can also use the name of the component as the key and then use that as the component inside the template where it then can be used as a self closing tag. We can even just use the component name as key without a value cause js will automatically expand it to a key:value pair with the same name.
How to style components locally?
You style components just for the component by adding a scoped attribute on the style config section
What are dynamic components?
dynamic components are special vue components that are provided by vue. They are used in the following manner:
(component :is=”nameOfAnotherComponent”)(/component).
It will then display the component that we passed its name into the “nameOfAnotherComponent” variable.
How do you keep the data entered in a dynamic component alive when you move between components?
in order to keep the data in a dynamic component alive when we switch between components we need to wrap the component tag in a keep-alive tag
What is teleport?
teleport is a built in component in vue which has a single attribute called to=”” which accepts a css selector for an html element where the content in the teleport tag should be moved to
