Vue2组件进阶与插槽详解

本篇攻略主要介绍Vue2组件的一些进阶用法，重点讲解Vue2插槽的使用。

组件进阶

动态和异步组件

在实际应用中，有些组件只有在需要的时候才会被加载。Vue2提供两种方式达到这种效果：动态组件和异步组件。

动态组件

动态组件可以通过<component>标签来实现，需要指定is属性，该属性值对应动态组件加载的名称：

<component :is="currentComponent"></component>

其中，currentComponent是一个变量名，根据实际需要动态改变。

异步组件

异步组件在组件的定义中使用import语句来实现，该组件会被打包异步加载，从而可以在需要时加载。

定义异步组件的方式如下：

const AsyncComponent = () => ({
  // 需要加载的组件，应当是一个 Promise
  component: import('./MyComponent.vue'),
  // 加载中应当渲染的组件
  loading: LoadingComponent,
  // 出错时可以渲染的组件
  error: ErrorComponent,
  // 渲染加载时发生的延迟。防止闪烁。
  delay: 200,
  // 最长等待时间。超时则渲染错误组件。
  timeout: 3000
})

其中，component是需要异步加载的组件，loading是加载中显示的组件，error是加载出错时显示的组件，delay是渲染加载中组件发生的延迟时间，timeout是最长等待时间（单位为毫秒），超时则渲染错误组件。

处理边界情况

错误处理

当组件渲染时，如果发生错误，Vue2提供了一个errorCaptured钩子函数来处理错误：

export default {
  data() {
    return {
      hasError: false
    }
  },
  errorCaptured(err, vm, info) {
    this.hasError = true
    console.error('component error:', err, vm, info)
    // 返回 false 以防止继续传播，而停止向上冒泡
    return false
  },
  render(h) {
    if (this.hasError) {
      return h('div', 'Component Error')
    }
    // render component with normal logic
  }
}

在errorCaptured函数中，可以进行错误处理，例如展示错误信息。

监听原生事件

Vue2的自定义事件是基于DOM事件的。如果需要监听原生事件（如window.resize、scroll等），需要使用$listeners属性：

mounted() {
  window.addEventListener('scroll', this.handleScroll)
},
beforeDestroy() {
  window.removeEventListener('scroll', this.handleScroll)
}

<template>
  <div @click="$emit('click')" v-on="$listeners">...</div>
</template>

插槽详解

插槽（Slot）是Vue2组件中极为重要的概念，可以理解为一种占位符，用于插入组件的内容。Vue2提供了多种插槽的用法，包括默认插槽、具名插槽、作用域插槽等。

默认插槽

默认插槽是最普通的插槽，当子组件中没有其他插槽时使用。可以通过在子组件中使用<slot>标签来定义默认插槽。

例如：

<template>
  <div>
    <h2>{{title}}</h2>
    <slot></slot>
  </div>
</template>

在父组件中使用：

<template>
  <div>
    <HelloWorld>
      <p>这是默认插槽的内容</p>
    </HelloWorld>
  </div>
</template>

在上述示例中，这是默认插槽的内容将替换子组件中的<slot></slot>标签，从而实现动态插入内容的效果。

具名插槽

当需要子组件中插入多个不同的内容时，可以使用具名插槽。这时需要在子组件中使用<slot>标签，并且指定name属性，以实现多个插槽的分组。

例如：

<template>
  <div>
    <h2>{{title}}</h2>
    <slot name="content"></slot>
    <slot name="footer"></slot>
  </div>
</template>

在父组件中使用：

<template>
  <div>
    <HelloWorld>
      <p slot="content">这是内容插槽的内容</p>
      <p slot="footer">这是页脚插槽的内容</p>
    </HelloWorld>
  </div>
</template>

在上述示例中，这是内容插槽的内容和这是页脚插槽的内容将分别替换子组件中的<slot name="content"></slot>和<slot name="footer"></slot>标签。

作用域插槽

作用域插槽是Vue2最为强大的插槽之一，可以实现父组件向子组件传递数据的功能。作用域插槽的结果是一个对象，包含父组件向子组件传递的数据。

子组件中的写法如下：

<template>
  <div>
    <slot :item="list[0]"></slot>
  </div>
</template>

父组件中的写法如下：

<template>
  <div>
    <HelloWorld>
      <template slot-scope="{ item }">
        <p>{{ item }}</p>
      </template>
    </HelloWorld>
  </div>
</template>

在上述示例中，<template slot-scope="{ item }">中item是父组件传递的数据，{{ item }}显示这个数据。

示例说明

示例1：使用默认插槽

在父组件中的用法如下：

<template>
  <div>
    <HelloWorld>
      <p>这是默认插槽的内容</p>
    </HelloWorld>
  </div>
</template>

实际渲染的结果为：

<div>
  <div>
    <h2>HelloWorld</h2>
    <p>这是默认插槽的内容</p>
  </div>
</div>

示例2：使用具名插槽