3个概念，入门 Vue 组件开发

桃扇骨 2022-02-22 07:15 118阅读 0赞

“组件”是 Vue 中比较基础的概念，但我发现，许多同学对 Vue 组件的概念和由来并不是清楚。因此，我希望通过这个专题，带大家换个角度来分析，最终让大家更清楚组件开发。

首先，我们先不谈组件，我想问大家一个问题：

我们平常用任何编程语言写方法（method）的时候，当一个方法里的逻辑过多时，我们会怎么办？当多个方法里有很多相似的逻辑时，我们该怎么办？

答案很明了：拆分成一个独立的方法。

如果拆分后还是有类似问题呢？那就继续拆分。

类比一下，HTML 也一样。当我们写了一大堆的 HTML后，发现有不少类似或重复的地方，我们也可以按照拆分的方法，拆分 HTML。除了拆分 HTML 之外，我们还可以拆分针对这段HTML书写的逻辑，甚至是样式。拆分后的HTML，逻辑，样式组合在一起，我们就称之为组件。

这么讲似乎有点抽象，我们来举个例子吧。假如我们要做一个简单的 TodoList 项目，代码如下：

\u0026lt;ul\u0026gt;    \u0026lt;li\u0026gt;      \u0026lt;input type=\u0026quot;checkbox\u0026quot;\u0026gt;      \u0026lt;span\u0026gt;学习 Vue 属性\u0026lt;/span\u0026gt;      \u0026lt;button\u0026gt;删除\u0026lt;/button\u0026gt;    \u0026lt;/li\u0026gt;    \u0026lt;li\u0026gt;      \u0026lt;input type=\u0026quot;checkbox\u0026quot;\u0026gt;      \u0026lt;span\u0026gt;学习 Vue 事件\u0026lt;/span\u0026gt;      \u0026lt;button\u0026gt;删除\u0026lt;/button\u0026gt;    \u0026lt;/li\u0026gt;    \u0026lt;li\u0026gt;      \u0026lt;input type=\u0026quot;checkbox\u0026quot;\u0026gt;      \u0026lt;span\u0026gt;学习 Vue 插槽\u0026lt;/span\u0026gt;      \u0026lt;button\u0026gt;删除\u0026lt;/button\u0026gt;    \u0026lt;/li\u0026gt;  \u0026lt;/ul\u0026gt;\u0026lt;/div\u0026gt;

可以看到，我们 li 标签内的内容越来越多，似乎可以把它独立出来，在 Vue 中，通过以下代码就可以将这部分代码独立出来.

通过 Vue.component 定义(注册)一个组件，起名为 todo-item, 组件的 HTML 写在 template 字段上:

Vue.component('todo-item', {  template: `\u0026lt;li\u0026gt;      \u0026lt;input type=\u0026quot;checkbox\u0026quot;\u0026gt;      \u0026lt;span\u0026gt;学习 Vue 属性\u0026lt;/span\u0026gt;      \u0026lt;button\u0026gt;删除\u0026lt;/button\u0026gt;    \u0026lt;/li\u0026gt;`})

然后，你可以通过下面这样的方式来使用这个组件：

\u0026lt;ul\u0026gt;    \u0026lt;todo-item\u0026gt;\u0026lt;/todo-item\u0026gt;    \u0026lt;todo-item\u0026gt;\u0026lt;/todo-item\u0026gt;    \u0026lt;todo-item\u0026gt;\u0026lt;/todo-item\u0026gt;  \u0026lt;/ul\u0026gt;\u0026lt;/div\u0026gt;

当然前提条件是你要先 new Vue 一个实例，并添加挂载点

new Vue({  el: '#app'  // 提供一个挂载点，这样我们就可以在里面使用 todo-item 了})

这样一来清爽了许多，可是这样就变成三个“学习 Vue 属性” 事项了，我们还缺“学习 Vue 事件”和“学习 Vue 插槽” ，怎么办呢，这就要用到 Vue 的属性了。

点击此处，开始你的第一个 Vue 程序

点击此处，了解单文件组件

## 属性 ##

我们接着改改，调用方法时，可以传递不同的参数，方法也可以接收参数，执行不同的逻辑，加载组件时同样也可以传递不同的参数(属性)，组件也可以接收参数(属性)来显示不同的内容：

Vue.component('todo-item', {  props: ['item'], // 声明能接收的参(属)数(性)  // {
         {item}} 使用传递过来的 item  template: `\u0026lt;li\u0026gt;      \u0026lt;input type=\u0026quot;checkbox\u0026quot;\u0026gt;      \u0026lt;span\u0026gt;{
         {item}}\u0026lt;/span\u0026gt;      \u0026lt;button\u0026gt;删除\u0026lt;/button\u0026gt;    \u0026lt;/li\u0026gt;`})\u0026lt;div id=\u0026quot;app\u0026quot;\u0026gt;  \u0026lt;ul\u0026gt;    \u0026lt;todo-item item=\u0026quot;学习 Vue 属性\u0026quot;\u0026gt;\u0026lt;/todo-item\u0026gt;    \u0026lt;todo-item item=\u0026quot;学习 Vue 事件\u0026quot;\u0026gt;\u0026lt;/todo-item\u0026gt;    \u0026lt;todo-item item=\u0026quot;学习 Vue 插槽\u0026quot;\u0026gt;\u0026lt;/todo-item\u0026gt;  \u0026lt;/ul\u0026gt;\u0026lt;/div\u0026gt;

我们再精简一下：

\u0026lt;ul\u0026gt;    \u0026lt;todo-item v-for=\u0026quot;item in list\u0026quot; :item=\u0026quot;item\u0026quot;\u0026gt;\u0026lt;/todo-item\u0026gt;  \u0026lt;/ul\u0026gt;\u0026lt;/div\u0026gt;new Vue({  el: '#app',  data() {    return {      list: ['学习 Vue 属性', '学习 Vue 事件', '学习 Vue 插槽']    }  }})

这样就可以了，是不是很简单？

点击此处，深入学习 Vue 中组件的属性

## 事件 ##

我现在已经学完了 Vue 属性，想要从 todolist 里面把它删除掉，这好像并不太容易。这时，我需要给 button 绑定一个事件，当然 Vue 提供给我们了一个简单的方式进行绑定事件，用@xxx 就可以进行事件绑定了(这里的xxx指的任一字符串，根据你的实际需要来命名就行)

Vue.component('todo-item', {  props: ['item'],  template: `\u0026lt;li\u0026gt;      \u0026lt;input type=\u0026quot;checkbox\u0026quot;\u0026gt;      \u0026lt;span\u0026gt;{
          {item}}\u0026lt;/span\u0026gt;      \u0026lt;button @click=\u0026quot;handleClick\u0026quot;\u0026gt;删除\u0026lt;/button\u0026gt;    \u0026lt;/li\u0026gt;`,  methods: {    handleClick() {    }  }})

然后我们需要把点击事件告诉我们的上层(父组件)，Vue 同样给我们提供了一个 API：this.$emit(‘xxx’, …)，我们既然是做删除操作，那就是叫delete好了，我们还可以传递更多的参数，如 this.item：

handleClick() {  this.$emit('delete', this.item)}

上层组件还缺少了一个用来接收 delete 的地方，我们可以通过 @delete 的方式来绑定一个用来接收 delete 事件的方法：

\\u0026lt;todo-item v-for=“item in list” :item=“item” @delete=“handleDelete”\\u0026gt;

最后只需要在 methods 字段上定义一个 handleDelete 方法，改变 list 数组就完成了我们的删除操作：

new Vue({  el: '#app',  data() {    return {      list: ['学习 Vue 属性', '学习 Vue 事件', '学习 Vue 插槽']    }  },  methods: {    handleDelete(item) {      const index = this.list.findIndex(text=\u0026gt;text === item);      this.list.splice(index, 1);    }  }})

以上就是 Vue 中事件的用法。

点击此处，深入学习 Vue 中组件的事件

## 插槽 ##

现在我想让这个TodoList中的“学习 Vue XXX”前加个图标 Icon，怎么办呢？还好 Vue 早就帮我想到了，我们不能再通过属性传递这些带有标签的内容，而是通过一种名叫“插槽”的东西进行传递：

当然我们也不能再用双括号来解析，我们需要使用 这种写法来解析：

template: `\u0026lt;li\u0026gt;      \u0026lt;input type=\u0026quot;checkbox\u0026quot;\u0026gt;      \u0026lt;span\u0026gt;{
          {item}}\u0026lt;/span\u0026gt;      \u0026lt;slot\u0026gt;\u0026lt;/slot\u0026gt;      \u0026lt;button @click=\u0026quot;handleClick\u0026quot;\u0026gt;删除\u0026lt;/button\u0026gt;    \u0026lt;/li\u0026gt;`,

这种我们称之为默认插槽。

现在我想更进一步，添加两个图标，一个在文字前面，一个在文字后面，没问题：

\u0026lt;todo-item v-for=\u0026quot;item in list\u0026quot; :item=\u0026quot;item\u0026quot; @delete=\u0026quot;handleDelete\u0026quot;\u0026gt;  \u0026lt;span slot=\u0026quot;prefixIcon\u0026quot;\u0026gt;我是前缀Icon\u0026lt;/span\u0026gt;  \u0026lt;span slot=\u0026quot;suffixIcon\u0026quot;\u0026gt;我是后缀Icon\u0026lt;/span\u0026gt;\u0026lt;/todo-item\u0026gt;

同样template需要更改：

template: `\u0026lt;li\u0026gt;      \u0026lt;input type=\u0026quot;checkbox\u0026quot;\u0026gt;      \u0026lt;slot name=\u0026quot;prefixIcon\u0026quot;\u0026gt;\u0026lt;/slot\u0026gt;      \u0026lt;span\u0026gt;{
          {item}}\u0026lt;/span\u0026gt;      \u0026lt;slot name=\u0026quot;suffixIcon\u0026quot;\u0026gt;\u0026lt;/slot\u0026gt;      \u0026lt;button @click=\u0026quot;handleClick\u0026quot;\u0026gt;删除\u0026lt;/button\u0026gt;    \u0026lt;/li\u0026gt;`,

这便是我们的具名插槽。

如果想让功能更加丰富的话，比如我想根据我的 input checkbox 的是否选中来改变图标的颜色，该怎么做？

第一步，记录我们input的选中状态，我们使用 Vue 的 v-model 进行 input 的双向绑定：

Vue.component('todo-item', {  props: ['item'],  data() {    return {      checked: false, // 默认不选中    }  },  template: `\u0026lt;li\u0026gt;      \u0026lt;input type=\u0026quot;checkbox\u0026quot; v-model=\u0026quot;checked\u0026quot;\u0026gt;      \u0026lt;slot name=\u0026quot;prefixIcon\u0026quot;\u0026gt;\u0026lt;/slot\u0026gt;      \u0026lt;span\u0026gt;{
          {item}}\u0026lt;/span\u0026gt;      \u0026lt;slot name=\u0026quot;suffixIcon\u0026quot;\u0026gt;\u0026lt;/slot\u0026gt;      \u0026lt;button @click=\u0026quot;handleClick\u0026quot;\u0026gt;删除\u0026lt;/button\u0026gt;    \u0026lt;/li\u0026gt;`,  methods: {    handleClick() {      this.$emit('delete', this.item)    }  }})

状态有了，现在需要把这个状态传递给上层:

\u0026lt;slot name=\u0026quot;prefixIcon\u0026quot; v-bind=\u0026quot;{checked}\u0026quot;\u0026gt;我是前缀Icon\u0026lt;/slot\u0026gt;

接收到状态后并根据状态提供不同颜色的图标：

\u0026lt;span slot=\u0026quot;prefixIcon\u0026quot; slot-scope=\u0026quot;props\u0026quot; :style=\u0026quot;{color: props.checked ?'red':'blue'}\u0026quot;\u0026gt;我是前缀Icon\u0026lt;/span\u0026gt;

这就是我们的作用域插槽。

为了方便理解，插槽使用方式我们使用了 Vue 2.5 版本的语法进行讲解，Vue 2.6 的语法可查看视频教程。

点击此处，深入学习 Vue 中组件的插槽

如果你已经阅读到了这里，那么恭喜你，你已经可以进行简单的 Vue 组件开发了。

如果还想学习更多的 Vue 实战技巧，欢迎订阅我的视频课程《Vue 开发实战》。