1. What is a dynamic component
Through the component bound by :is="XXX", the bound variable is defined in the data and can be dynamically updated.
Similar to routing <router-view></router-view>
<keep-alive>
<com-a></com-a>
</keep-alive>
//When switching components, <keep-alive> can store the current component to improve efficiency when switching back in the subsequent sequence
2. Interaction between components
(1) The parent component passes a props inward
<com-a :my-prop="prop1">
Inside the child component, get the data passed in from the parent component by defining this props
export default{
props:{
prop1:[Number,String],
prop2:[Number,String]
......
}
}
(2) The child component triggers an event, and the parent component obtains the information of the child component by listening to this event
(3) The parent component uses the tag <slot> to receive by inserting a slot into the child component.
Summarize:
(1) Use the component tree to design the project, the configuration file links each component-name conversion, the dynamic component is:bind
(2) The parent component passes properties inward - dynamic properties
(3) Subcomponents publish events externally
(4) Slot transfer template - default slot, named slot