vue2技能树（8）-组件的复用、插槽、动态组件

---

👍 点赞，你的认可是我创作的动力！

⭐️ 收藏，你的青睐是我努力的方向！

✏️ 评论，你的意见是我进步的财富！

---

Vue 2 组件复用详解

组件复用是Vue.js 2中的一个核心概念，它允许你在不同地方多次使用相同的组件，提高了代码的可维护性和可重用性。以下是对Vue 2组件复用的多方面详细介绍，包括使用详细的项目示例。

全局组件复用

全局组件是通过Vue.component 方法注册的，可以在整个应用中复用。

项目示例

假设你有一个全局组件Button，用于显示按钮。

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

Vue.component('Button', {
  template: '<button>点击我</button>'
});

new Vue({
  el: '#app'
});

在这个示例中，Button 全局组件可以在应用的不同地方多次复用，显示多个按钮。

局部组件复用

局部组件是在Vue实例的components 选项中注册的，只能在该实例的作用域内复用。

项目示例

假设你有一个局部组件AlertBox，用于显示警告框。

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

new Vue({
  el: '#app',
  components: {
    'alert-box': {
      template: '<div>警告：这是一个警告框</div>'
    }
  }
});

在这个示例中，alert-box 局部组件只能在该Vue实例的作用域内复用，显示多个警告框。

插槽（Slot）复用

Vue 2 提供了插槽（Slot）机制，允许你在组件内部插入不同的内容，实现更灵活的组件复用。

项目示例

假设你有一个Card 组件，允许在卡片内部插入不同的内容。

<div id="app">
  <card>
    <h2>标题</h2>
    <p>这是卡片内容。</p>
  </card>
  <card>
    <img src="image.jpg" alt="图片">
  </card>
</div>

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

new Vue({
  el: '#app'
});

在这个示例中，Card 组件使用<slot></slot> 来插入不同的内容，可以用于显示文本内容或图片等。

动态组件复用

Vue 2 支持动态组件，允许你在运行时动态地切换不同的组件，实现更灵活的组件复用。

项目示例

假设你有一个Tab 组件，允许切换不同的标签内容。

<div id="app">
  <tab :tab="selectedTab"></tab>
  <button @click="selectedTab = 'tab1'">标签1</button>
  <button @click="selectedTab = 'tab2'">标签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>标签1的内容</p>'
    },
    'tab2': {
      template: '<p>标签2的内容</p>'
    }
  }
});

在这个示例中，Tab 组件根据selectedTab 的值动态切换不同的标签内容。

Vue 2的组件复用机制非常灵活，你可以根据项目需求选择不同的方式来实现组件的复用。无论是全局组件、局部组件、插槽、动态组件，都可以帮助你构建可维护和高度复用的组件。

Vue 2 组件插槽详解

组件插槽（Slot）是Vue.js 2中的一个强大特性，它允许你在组件内部插入不同的内容，实现更灵活的组件复用和布局。以下是对Vue 2组件插槽的多方面详细介绍，包括使用详细的项目示例。

基本插槽

基本插槽是最简单的一种插槽，允许你在组件内部插入任意内容。在组件内部，使用<slot></slot> 来定义一个插槽的位置。

项目示例

假设你有一个Card 组件，允许在卡片内部插入不同的内容。

<div id="app">
  <card>
    <h2>标题</h2>
    <p>这是卡片内容。</p>
  </card>
  <card>
    <img src="image.jpg" alt="图片">
  </card>
</div>

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

new Vue({
  el: '#app'
});

在这个示例中，Card 组件使用<slot></slot> 来定义插槽的位置，然后在组件内部可以插入不同的内容。

具名插槽

具名插槽允许你为插槽定义名称，并在组件内部根据名称插入内容。你可以在<slot> 标签中使用name 属性来定义插槽的名称。

项目示例

假设你有一个Layout 组件，允许在不同位置插入不同的内容，如页眉、页脚和主要内容。

<div id="app">
  <layout>
    <template v-slot:header>
      <header>这是页眉</header>
    </template>
    <template v-slot:footer>
      <footer>这是页脚</footer>
    </template>
    <p>这是主要内容</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'
});

在这个示例中，Layout 组件使用具名插槽，为插槽定义了header 和footer 的名称，然后在组件内部使用<slot name="header"></slot> 和<slot name="footer"></slot> 来插入具名插槽的内容。

作用域插槽

作用域插槽允许你将父组件的数据传递到插槽内部，实现更灵活的组件复用。

项目示例

假设你有一个List 组件，允许在列表中插入不同的内容，并且需要将数据传递到插槽内部。

<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: ['项目1', '项目2', '项目3']
  }
});

在这个示例中，List 组件使用作用域插槽，通过:item="item" 将父组件的数据item 传递到插槽内部，然后在插槽内部可以使用item 来访问数据。

Vue 2的组件插槽功能允许你实现高度灵活的组件复用，不仅可以在组件内部插入不同的内容，还可以传递数据到插槽内部，实现更丰富的功能和布局。无论是基本插槽、具名插槽还是作用域插槽，都可以提高组件的可重用性和灵活性。

Vue 2 动态组件详解

动态组件是Vue.js 2中的一个重要特性，它允许你在运行时切换不同的组件，实现更灵活的组件复用和渲染。以下是对Vue 2动态组件的多方面详细介绍，包括使用详细的项目示例。

动态组件的基本使用

动态组件允许你在同一个挂载点上动态切换不同的组件。在Vue中，你可以使用<component> 元素来实现动态组件。

项目示例

假设你有一个Tab 组件，允许切换不同的标签内容。

<div id="app">
  <tab :tab="selectedTab"></tab>
  <button @click="selectedTab = 'Tab1'">标签1</button>
  <button @click="selectedTab = 'Tab2'">标签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>标签1的内容</p>'
    },
    Tab2: {
      template: '<p>标签2的内容</p>'
    }
  }
});

在这个示例中，tab 组件使用<component :is="tab"></component> 来动态渲染selectedTab 对应的组件，实现标签切换功能。

使用keep-alive 缓存动态组件

如果需要在切换不同的组件时保持它们的状态，你可以使用<keep-alive> 元素来缓存动态组件。

项目示例

假设你有一个Tab 组件，希望在切换标签时保持标签内容的状态。

<div id="app">
  <tab :tab="selectedTab"></tab>
  <button @click="selectedTab = 'Tab1'">标签1</button>
  <button @click="selectedTab = 'Tab2'">标签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>标签1的内容</p>'
    },
    Tab2: {
      template: '<p>标签2的内容</p>'
    }
  }
});

在这个示例中，<keep-alive> 元素用于缓存动态组件，保持它们的状态。当切换标签时，组件的状态会被保留，而不是重新渲染。

使用v-on 绑定动态组件

你还可以使用v-on 指令动态绑定组件，根据不同的条件渲染不同的组件。

项目示例

假设你有一个User 组件，根据用户的权限动态渲染不同的用户信息。

<div id="app">
  <user :role="userRole"></user>
  <button @click="userRole = 'admin'">显示管理员信息</button>
  <button @click="userRole = 'user'">显示普通用户信息</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>管理员信息</p>'
    },
    UserInfo: {
      template: '<p>普通用户信息</p>'
    },
    GuestInfo: {
      template: '<p>访客信息</p>'
    }
  }
});

在这个示例中，user 组件使用<component :is="getUserComponent(role)"></component> 来根据userRole 渲染不同的用户信息组件。

Vue 2的动态组件功能允许你在运行时切换不同的组件，使应用更加灵活和可维护。无论是基本的动态组件、使用keep-alive 缓存组件还是通过v-on 绑定动态组件，都可以满足不同的需求。