vue3.0 CLI – 2.6 – 组件的复用入门教程

下面我将详细讲解“vue3.0 CLI - 2.6 - 组件的复用入门教程”的完整攻略。

1. 什么是组件？

在 Vue 中，组件是一种可复用的、独立的模块，用于封装相关的 HTML、CSS 和 JavaScript。组件的出现可以让 Web 应用程序更轻松地维护和扩展。

2. 组件的创建

在 Vue 中，用 Vue.component 方法来创建组件。例如：

Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})

上面的代码创建了一个名为 my-component 的组件，并指定了组件的模板。

组件的模板一般规定在一个单独的 .vue 文件中，方便管理和维护。我们可以用 Vue CLI 创建一个 .vue 文件：

vue create my-project
cd my-project
vue add @vue/cli-plugin-babel

在 src/components 目录下创建一个名为 MyComponent.vue 的文件，然后写入下面的代码：

<template>
  <div class="my-component">
    <h2>{{ title }}</h2>
    <p>{{ content }}</p>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  props: {
    title: String,
    content: String
  }
}
</script>

<style scoped>
.my-component {
  background: #eee;
  padding: 20px;
}
</style>

上面的代码创建了一个包含标题和正文的组件，并给组件指定了 title 和 content 两个属性。<style scoped> 表示该样式只作用于当前组件，不会影响其他组件或全局样式。

3. 组件的引用

上面创建的组件可以在其他组件中引用。假设我们在 src/views/Home.vue 中需要使用这个组件，那么可以这样引用：

<template>
  <div class="home">
    <MyComponent title="Hello" content="I am content"></MyComponent>
  </div>
</template>

<script>
import MyComponent from '@/components/MyComponent.vue'

export default {
  name: 'Home',
  components: {
    MyComponent
  }
}
</script>

<style>
.home {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

我们使用 import 导入组件，并在 components 中注册组件。然后在模板中使用 <MyComponent> 标签来引用组件，并传入相应的属性值。

4. 复用组件

有时候，我们需要将某个组件复用到多个页面或组件中。此时，需要将组件封装成插件，方便在不同的地方复用。

假设我们将 MyComponent 组件封装成一个插件，在 src/plugins/my-component.js 中写下面的代码：

import MyComponent from '@/components/MyComponent.vue'

export default {
  install(Vue) {
    Vue.component('MyComponent', MyComponent)
  }
}

上面的代码定义了一个 install 方法，该方法在 Vue 的 use 方法中被调用。在 install 方法中，我们将 MyComponent 注册成全局组件。

然后，我们在 src/main.js 中引入插件并安装：

import Vue from 'vue'
import App from './App.vue'
import MyComponent from './plugins/my-component'

Vue.use(MyComponent)

new Vue({
  el: '#app',
  render: h => h(App)
})

这样，我们就在全局注册了 MyComponent 组件。

5. 示例说明

这里给出两个示例说明：

示例一：列表组件

我们可以创建一个通用的列表组件 MyList，用于显示多个列表项。我们在 src/components 目录下创建一个名为 MyList.vue 的文件，并写入如下的代码：

<template>
  <ul>
    <li v-for="item in items">{{ item }}</li>
  </ul>
</template>

<script>
export default {
  name: 'MyList',
  props: {
    items: Array
  }
}
</script>

<style scoped>
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  padding: 5px 10px;
  background: #eee;
  border-radius: 3px;
}
</style>

上面的代码创建了一个 MyList 组件，并通过属性传递一个数组 items，用于显示列表项。

我们可以在多个页面或组件中使用 MyList 组件，只需要传递不同的 items 参数即可。

示例二：全局弹窗组件

我们可以创建一个全局弹窗组件 MyToast，用于在页面中显示提示信息。我们在 src/plugins 目录下创建一个名为 my-toast.js 的文件，并写入如下的代码：

import MyToast from '@/components/MyToast.vue'

export default {
  install(Vue) {
    Vue.prototype.$toast = function (message) {
      const Constructor = Vue.extend(MyToast)
      const toast = new Constructor().$mount()
      document.body.appendChild(toast.$el)
      toast.message = message
    }
  }
}

上面的代码定义了一个 install 方法，该方法在 Vue 的 use 方法中被调用。在 install 方法中，我们向 Vue 的原型对象中添加了 $toast 方法，用于显示弹窗。

在 $toast 方法中，我们通过 Vue.extend 创建了一个 MyToast 组件实例，并将其挂载到文档流中。然后，我们可以通过 toast.$el 来获取实例对应的 DOM 元素，并设置其 message 属性的值。

通过上述方式，我们就可以在任意页面或组件中调用 $toast 方法，弹出一个提示信息的弹窗。例如，在 src/views/Home.vue 中调用如下代码：

this.$toast('Hello World!')

这样就可以弹出一个包含 Hello World! 文本的弹窗了。

总结

本文介绍了在 Vue 中创建、引用和复用组件的方法。并通过两个示例说明了如何将组件封装为插件，方便在不同的页面或组件中复用。在实际开发中，组件化开发是一种非常重要的技能，可以提高代码的复用性和可维护性。