Please enable JavaScript.

Coggle requires JavaScript to display documents.

Vue Components - Advanced - Coggle Diagram

- - - - Put general-purpose component here. e.g. button
    - - Could cause efficiency problem
    - - Move header to app.vue since it is only used in that page
  - - - {'the-header': TheHeader}
        
        <the-header></the-header>
      - {TheHeader}
        
        <TheHeader /> and <the-header></the-header>
        
        can use self-closing tag only when declared in Camel-Case
- - - - <template>
        <div>
        <slot></slot>
        </div>
        </template>
        <style scoped>
        div {...}
        </style>
    - - <base-card>put any content in here</base-card>
  - - - <div>
        <header>
        <slot name="header"></slot>
        </header>
        <slot></slot>
        </div>
        
        Must have one unnamed slot !
    - - <template v-slot:header><h2>This goes to the slot named header</h2></temlate><p>This goes to default slot</p>
        
        <template v-slot:default>Explicitly tells this to go to default slot</template>
  - - - <header v-if="this.$slots.header">
        <slot name="header"></slot>
        </header>
        
        prevent header to be rendered if the content of header slot is not provided
        
        this.$slots.header === undefined --> no content
    - - <slot><h2>Default header</h2></slot>
    - - e.g <template #name>slot content goes inside here</template>
    - - CourseGoals.vue
        
        <li v-for="goal in goals" :key="goal"><slot :item="goal" another-prop="..."></slot></li>
      - to use
        
        when only using default slot, this is the best way to write
        
        <course-goals #default="slotProps"><h2>{{ slotProps.item }}</h2><p>{{ slotProps['another-prop'] }}</p></course-goals>
        
        put merged data on #default attribute <template>
        
        <course-goals><template #default="slotProps"><h2>{{ slotProps.item }} </h2>...</course-goals>
      - solve the problem that data and template were given by different comps
- - - - the component will not be unmounted so the state would be kept