vue2 skill tree (8) – component reuse, slots, dynamic components

Detailed explanation of Vue 2 component reuse

Component reuse is a core concept in Vue.js 2. It allows you to use the same component multiple times in different places, improving the maintainability and reusability of the code. The following is a detailed introduction to many aspects of Vue 2 component reuse, including detailed project examples of use.

Global component reuse

Global components are registered through the Vue.component method and can be reused throughout the application.

Project examples

Suppose you have a global component Button that displays a button.

<div id="app">
  <button></button>
  <button></button>
</div>

Vue.component('Button', {<!-- -->
  template: '<button>Click me</button>'
});

new Vue({<!-- -->
  el: '#app'
});

In this example, the Button global component can be reused multiple times in different places in the application to display multiple buttons.

Reuse of local components

Local components are registered in the components option of the Vue instance and can only be reused within the scope of the instance.

Project examples

Suppose you have a partial component AlertBox that displays an alert box.

<div id="app">
  <alert-box></alert-box>
  <alert-box></alert-box>
</div>

new Vue({<!-- -->
  el: '#app',
  components: {<!-- -->
    'alert-box': {<!-- -->
      template: '<div>Warning: This is a warning box</div>'
    }
  }
});

In this example, the alert-box local component can only be reused within the scope of the Vue instance to display multiple alert boxes.

Slot reuse

Vue 2 provides a slot mechanism that allows you to insert different content inside components to achieve more flexible component reuse.

Project examples

Suppose you have a Card component that allows different content to be inserted inside the card.

<div id="app">
  <card>
    <h2>Title</h2>
    <p>This is the card content.</p>
  </card>
  <card>
    <img src="image.jpg" alt="image">
  </card>
</div>

Vue.component('Card', {<!-- -->
  template: `
    <div class="card">
      <slot></slot>
    </div>
  `
});

new Vue({<!-- -->
  el: '#app'
});

In this example, the Card component uses to insert different content, which can be used to display text content or images, etc.

Dynamic component reuse

Vue 2 supports dynamic components, allowing you to dynamically switch between different components at runtime to achieve more flexible component reuse.

Project examples

Suppose you have a Tab component that allows switching between different tab contents.

<div id="app">
  <tab :tab="selectedTab"></tab>
  <button @click="selectedTab = 'Tab1'">Tab 1</button>
  <button @click="selectedTab = 'Tab2'">Tab 2</button>
</div>

Vue.component('Tab', {<!-- -->
  props: ['tab'],
  template: `
    <div>
      <component :is="tab"></component>
    </div>
  `
});

new Vue({<!-- -->
  el: '#app',
  data: {<!-- -->
    selectedTab: 'tab1'
  },
  components: {<!-- -->
    'tab1': {<!-- -->
      template: '<p>Contents of tag 1</p>'
    },
    'tab2': {<!-- -->
      template: '<p>Contents of tag 2</p>'
    }
  }
});

In this example, the Tab component dynamically switches between different tab contents based on the value of selectedTab.

The component reuse mechanism of Vue 2 is very flexible. You can choose different ways to implement component reuse according to project needs. Whether it is global components, local components, slots, or dynamic components, it can help you build maintainable and highly reusable components.

Detailed explanation of Vue 2 component slots

Component slot (Slot) is a powerful feature in Vue.js 2. It allows you to insert different content inside the component to achieve more flexible component reuse and layout. The following is a multi-faceted, detailed introduction to Vue 2 component slots, including usage detailed project examples.

Basic slots

Basic slots are the simplest slots and allow you to insert arbitrary content inside a component. Inside the component, use to define the location of a slot.

Project examples

Suppose you have a Card component that allows different content to be inserted inside the card.

<div id="app">
  <card>
    <h2>Title</h2>
    <p>This is the card content.</p>
  </card>
  <card>
    <img src="image.jpg" alt="image">
  </card>
</div>

Vue.component('Card', {<!-- -->
  template: `
    <div class="card">
      <slot></slot>
    </div>
  `
});

new Vue({<!-- -->
  el: '#app'
});

In this example, the Card component uses to define the location of the slot, and then different content can be inserted inside the component.

Named slot

Named slots allow you to define a name for the slot and insert content based on the name inside the component. You can define the name of the slot using the name attribute in the tag.

Project examples

Suppose you have a Layout component that allows different content to be inserted at different locations, such as header, footer and main content.

<div id="app">
  <layout>
    <template v-slot:header>
      <header>This is the header</header>
    </template>
    <template v-slot:footer>
      <footer>This is the footer</footer>
    </template>
    <p>This is the main content</p>
  </layout>
</div>

Vue.component('Layout', {<!-- -->
  template: `
    <div>
      <header>
        <slot name="header"></slot>
      </header>
      <main>
        <slot></slot>
      </main>
      <footer>
        <slot name="footer"></slot>
      </footer>
    </div>
  `
});

new Vue({<!-- -->
  el: '#app'
});

In this example, the Layout component uses named slots, defines the header and footer names for the slots, and then uses and to insert the contents of the named slot.

Scope slot

Scope slots allow you to pass the data of the parent component into the slot to achieve more flexible component reuse.

Project examples

Suppose you have a List component that allows inserting different contents into the list, and you need to pass the data inside the slot.

<div id="app">
  <list :items="itemList">
    <template v-slot:item="{ item }">
      <li>{<!-- -->{ item }}</li>
    </template>
  </list>
</div>

Vue.component('List', {<!-- -->
  props: ['items'],
  template: `
    <ul>
      <slot v-for="item in items" :item="item"></slot>
    </ul>
  `
});

new Vue({<!-- -->
  el: '#app',
  data: {<!-- -->
    itemList: ['item1', 'item2', 'item3']
  }
});

In this example, the List component uses a scoped slot to pass the parent component’s data item to the slot via :item="item" Inside the slot, you can then use item to access the data inside the slot.

The component slot function of Vue 2 allows you to achieve highly flexible component reuse. Not only can you insert different content inside the component, but you can also transfer data to the slot to achieve richer functions and layouts. Whether basic slots, named slots, or scoped slots, you can increase the reusability and flexibility of your components.

Detailed explanation of Vue 2 dynamic components

Dynamic components are an important feature in Vue.js 2, which allow you to switch between different components at runtime to achieve more flexible component reuse and rendering. The following is a detailed, multi-faceted introduction to Vue 2 dynamic components, including detailed project examples of their use.

Basic use of dynamic components

Dynamic components allow you to dynamically switch between different components on the same mount point. In Vue, you can use the element to implement dynamic components.

Project examples

Suppose you have a Tab component that allows switching between different tab contents.

<div id="app">
  <tab :tab="selectedTab"></tab>
  <button @click="selectedTab = 'Tab1'">Tab 1</button>
  <button @click="selectedTab = 'Tab2'">Tab 2</button>
</div>

Vue.component('tab', {<!-- -->
  props: ['tab'],
  template: `
    <div>
      <component :is="tab"></component>
    </div>
  `
});

new Vue({<!-- -->
  el: '#app',
  data: {<!-- -->
    selectedTab: 'Tab1'
  },
  components: {<!-- -->
    Tab1: {<!-- -->
      template: '<p>Contents of tag 1</p>'
    },
    Tab2: {<!-- -->
      template: '<p>Contents of tag 2</p>'
    }
  }
});

In this example, the tab component uses to dynamically render the corresponding component of selectedTab. Implement label switching function.

Use `keep-alive` to cache dynamic components

If you need to maintain the state of different components when switching between them, you can use the element to cache dynamic components.

Project examples

Suppose you have a Tab component and want to maintain the state of the tab content when switching tabs.

<div id="app">
  <tab :tab="selectedTab"></tab>
  <button @click="selectedTab = 'Tab1'">Tab 1</button>
  <button @click="selectedTab = 'Tab2'">Tab 2</button>
</div>

Vue.component('tab', {<!-- -->
  props: ['tab'],
  template: `
    <div>
      <keep-alive>
        <component :is="tab"></component>
      </keep-alive>
    </div>
  `
});

new Vue({<!-- -->
  el: '#app',
  data: {<!-- -->
    selectedTab: 'Tab1'
  },
  components: {<!-- -->
    Tab1: {<!-- -->
      template: '<p>Contents of tag 1</p>'
    },
    Tab2: {<!-- -->
      template: '<p>Contents of tag 2</p>'
    }
  }
});

In this example, the element is used to cache dynamic components, maintaining their state. When switching tabs, the component’s state is preserved instead of re-rendered.

Use `v-on` to bind dynamic components

You can also use the v-on directive to dynamically bind components and render different components according to different conditions.

Project examples

Suppose you have a User component that dynamically renders different user information based on the user’s permissions.

<div id="app">
  <user :role="userRole"></user>
  <button @click="userRole = 'admin'">Show administrator information</button>
  <button @click="userRole = 'user'">Show common user information</button>
</div>

Vue.component('user', {<!-- -->
  props: ['role'],
  template: `
    <div>
      <component :is="getUserComponent(role)"></component>
    </div>
  `,
  methods: {<!-- -->
    getUserComponent(role) {<!-- -->
      if (role === 'admin') {<!-- -->
        return 'AdminInfo';
      } else if (role === 'user') {<!-- -->
        return 'UserInfo';
      }
      return 'GuestInfo';
    }
  }
});

new Vue({<!-- -->
  el: '#app',
  data: {<!-- -->
    userRole: 'guest'
  },
  components: {<!-- -->
    AdminInfo: {<!-- -->
      template: '<p>Administrator information</p>'
    },
    UserInfo: {<!-- -->
      template: '<p>General user information</p>'
    },
    GuestInfo: {<!-- -->
      template: '<p>Visitor information</p>'
    }
  }
});

In this example, the user component uses to render differently based on the userRole User information component.

Vue 2’s dynamic component feature allows you to switch different components at runtime, making the application more flexible and maintainable. Whether it is a basic dynamic component, caching components using keep-alive or binding dynamic components through v-on, different needs can be met.

Directory

Detailed explanation of Vue 2 component reuse

Global component reuse

Project examples

Reuse of local components

Project examples

Slot reuse

Project examples

Dynamic component reuse

Project examples

Detailed explanation of Vue 2 component slots

Basic slots

Project examples

Named slot

Project examples

Scope slot

Project examples

Detailed explanation of Vue 2 dynamic components

Basic use of dynamic components

Project examples

Use keep-alive to cache dynamic components

Project examples

Use v-on to bind dynamic components

Project examples

Use `keep-alive` to cache dynamic components

Use `v-on` to bind dynamic components