实战Vue组件和Mixins

特别声明，本文根据 @Saqueib Ansari 的《 Practical use of Components and Mixins in Vue JS 》一文所整理。

这篇文章主要帮助我们深入的学习Vue的组件和 mixins ，它们帮助你扩展基本的HTML元素，用来封装可重用的代码。在较高的层次上，组件是定制的元素，Vue的编译器附加了行为，而 mixins 为你提供了一个保持代码可重用性的方式，从而使你的代码保持干净和易于维护。

如果你从未接触过Vue的 mixins ，建议你花点时间先阅读《 Vue中的 Mixins 》一文。

Vue组件

组件是一段可重用的UI，它封装了其中的所有行为和功能。比如Chrome的日期输入框（ <input type="date"> ）就是浏览器提供的一个组件，它会给你一个日历弹出框来供你选择日期。你只需要在使用的地方添加一个类型（ type ）为 date 的输入框（ input ），即： <input type="date" > ，就可以神奇地获得所有关于日期的功能。类似地，Vue为你提供了创建自己定制组件的选项。如果你想构建SPA，你可能需要一个根组件，比如 App （ <App> ）组件，它通常充当包装器，并包含所有的根级状态。

创建一个组件

现在让我们在Vue中创建一个组件，我们将构建一个 Card 组件：

<!-- Card.vue -->
<template>
    <div class="card">
        <div class="card-header">Card title</div>
        <div class="card-body">Card content</div>
    </div>
</template>

<!-- App.vue -->
<template>
    <div id="app" class="container">
        <Card />
    </div>
</template>

<script>
    import Card from "./components/Card";

    export default {
        name: "App",
        components: {
            Card
        }
    };
</script>

这是我们想要的样子：

没有什么特别的，一个简单的组件需要一个名称（ name ，比如上例中的 Card ）作为元素的标签和由该标签渲染的模板（ <template> ）。在上面的示例中，使用的是 <Card /> 。也有人建议在组件名称前添加自己的私有前缀，这样做的好处是不是与第三方引入的组件名发生冲突。

向组件传递数据

就上面示例而言， Card 组件到目前为止并没有做任何事，只是显示了文本中位符，并无法达到定制标题和内容的效果（也就是动态加载数据，更改模板中的内容）。这个时候我们可以给 Card 定制两个属性： title 和 body 。在Vue中，组件可以通过 props 接受外部数据，因此在上例的基础上，定义 title 和 body 来动态接受外部数据。

<!-- Card.vue -->
<template>
    <div class="card mb-3">
        <div class="card-header">{{ title }}</div>
        <div class="card-body">{{ body }}</div>
    </div>
</template>

<script>
    export default {
        name: "Card",
        props: ['title', 'body'],
        data() {
            return {};
        }
    };
</script>

<!-- App.vue -->
<template>
    <div id="app" class="container">
        <Card v-for="(item, index) in cardLists" :title="item.title" :body="item.body" :key="index" />
    </div>
</template>

<script>
import Card from "./components/Card";

export default {
    name: "App",
    components: {
        Card
    },
    data() {
        return {
            cardLists: [
                {
                    title: "User Details",
                    body: "Hi, I am Airen from https://www.w3cplus.com"
                },
                {
                    title: "Latest Posts",
                    body: "Components, Directives, Filters and Mixins in Vue JS"
                }
            ]
        };
    }
};
</script>

正如你所见，在 <Card> 组件上添加了 Props ，因此在模板中可以使用 {{ title }} 和 {{ body }} 给HTML元素传递值，从而取替了之前的静态文本。这样就可以在调用 <Card> 组件的地方，通过 title="some literal string" 或者像示例中一样通过 :title="titleVar" 绑定一个变量。

这样一来，我们的组件就可以达到重用的目的。

注，这里使用了Vue中的一些指令，比如 v-for 和 v-bind 。其中 v-for 用来对数据做遍历，而 v-bind 用来做属性的绑定。

创建一个子组件

我们还可以将组件嵌套在另一个组件中。接下来让我们来创建一个 Follow 组件，它就像一个切换器（关注还是未关注）一样，用来跟踪用户。

在 UserList 组件中，我们从 https://reqres.in 中获取用户相关的信息，然后将它们添加到 users 数组件，最后通过 v-for 将其遍历出来。你也可以看到在 UserList 中添加了一个子组件 Follow ，该组件放置在 UserList 组件的用户名下面。因此，你可以将任何组件嵌套在另一个组件中。你可以点击 Follow 按钮进行状态切换，那是因为使用 v-on 将 click 事件绑定了一个 toggle 方法，当然，你也可以使用 @click="toggle" 这样的简写方式。在我们的示例中，还在 @click 后面添加了一个后缀 prevent ，用来防止元素默认的事件。在 toggle 方法中，主要做的事件就是用来切换按钮状态，用来追踪状态已更改。

将数据从子组件传递到父组件

Vue自琮发布子事件系统，可以使用 vm.$emit('myEvent', payload) 来发送事件，该事件可以被父组件监听。用户在单击 Follow 组件上的 Follow 按钮时发出 followed 事件，我们将在父组件 UserList 中监听它。

正如你所看到的，当 Follow 组件的 toggle() 触发时，会通过 vm.$emit('followed', payload) 向父组件 UserList 发送 followed 事件，这个时候 UserList 组件的方法 handleFollow(payload) 就会被被触发。

通过上面的两个示例向大家展示了两种不同的方式进行组件之间的数据通讯。有关于Vue组件之间的数据通讯更多的教程，可以阅读下面的文章。

• 使用事件总线共享组件之间的 Props
• 事件总线（ EventBus ）
• Vue组件通讯
• Vue中的状态管理

使用Slot定制模板

Vue中的 props 对于传递变量和表达式很好，但是如果你想给HTML传递就行不通了。在Vue中可以使用 slot 来定制模板，这使得组件非常灵活。接来下看看如何通过 slot 给 Card 组件传递HTML所需要的内容。

在组件中添加 slot 可能是最简单的，你只需要编辑 <template> 并添加 <slot></slot> ，也可以通过 name 给 slot 命名，比如 <slot name="title"></slot> 。调用 slot 也非常的简单，只需要传递你的内容到 slot 中，像下面这样：

<Card>
    <!-- default slot -->
    I will be shown in default slot 

    <div slot="title">
        As you guessed I will end up in title slot
    </div>
</Card>

有关于Vue组件中关于 slot 更深入的介绍，可以阅读《 Vue组件内容分发（ slot ） 》一文。

Vue组件的生命周期的钩子函数

下面是在Vue组件、实例的生命周期中触发的钩子。所有生命周期钩子都将 this 上下文自动绑定到实例，以便你可以访问 data 、 computed 和 methods 。

Vue提供的可以注册的钩子都在上图中红色框标注。他们是：

• beforeCreate ：在实例初始化之后，数据观测（Data Observer）和 event / watcher 事件配置之前被调用
• created ：实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据(Data Observer)、属性和方法的运算， watch / event 事件回调。然而，挂载阶段还没开始， $el 属性目前不可见
• beforeMount ：在挂载开始之前被调用：相关的 render 函数首次被调用
• mounted ： el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内
• beforeUpdate ：数据更新时调用，发生在虚拟DOM重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程
• updated ：由于数据更改导致虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件DOM已经更新，所以你现在可以执行依赖于DOM的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用
• beforeDestroy ：实例销毁之前调用。在这一步，实例仍然完全可用
• destroyed ：Vue实例销毁后调用。调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用

打开浏览器的 console 查看对应的生命周期钩子函数相应的输出结果：

有关于Vue生命周期更深入的介绍，可以阅读《Vue实例和生命周期》一文。

Vue的Mixins

mixins 是Vue组件分发可重用功能的一种灵活方法。 mixins 对象可以包含组件的任何选项。当组件使用 mixins 时， mixins 中的所有选项将混入组件自己的选项。

你可能已经看到Bootstrap的很多组件有多种状态，比如 success 、 error 、 warning 和 info 等。如果你想给一个按钮添加 loading 、 warning 和 error 状态，就可以通过创建一个 mixins 。除了在按钮上可以使用之外，还可以在 Alert 、 Card 之类的组件使用这些状态。

在上面的示例中，创建了 stateableMixin 和 closeableMixin 两个 mixins 。 stateableMixin 给元素传递 type 类型，所以可以使用不同的状态。 closeableMixin 添加关闭和切换行为。在Vue中可以同时使用多个 mixins 。比如上例中的 Card 和 Alert 组件中同时使用了这两个 mixins 。

这就是它的要点，使用 mixins ，你可以创建一个一致的API，运用在整个运用程序中和你的组件一起工作。而且你可以始终在一个地方维护你的 mixins ，这样做也会让所有使用它的组件受益。

有关于Vue组件的 mixins 更多的介绍，可以阅读《Vue中的Mixins》一文。

总结

这篇文章主要介绍了Vue的组件和 mixins 。可以涵盖了Vue组件的很多方面，比如说：创建组件，组件数据通讯， EventBus （事件总线）和生命周期以及 mixins 等。涉及的内容比较多，也比较零乱，不过还是希望你能在这篇文章中获得自己想要的一些东西。如果文章中有不对之处，还请在下面的评论中指正，如果你有更多的经验或建议，也欢迎在下面的评论中与我们一起分享。