Vue.extend如何详细实现message组件库示例？

本文共计951个文字，预计阅读时间需要4分钟。

目录概述Vue.extendmessage 组件组件配置对象（即.vue 文件）message 组件的生成函数使用方法效果图总结概述Vue.extendmessage 组件组件配置对象（.vue 文件）message 组件的生成函数使用方法效果图总结当使用组件库时，某些组件并非直接放入模板中，而是通过生成函数创建。

目录

• 概述
• Vue.extend
• message 组件配置对象（就是.vue文件）
• message 生成组件的函数
• 使用方法
• 效果图
• 总结

概述

当我们使用组件库的时候，某些组件并不是直接放到模板当中进行使用，而是通过api的方式调用生成组件并且挂在到我们的页面中，其中最常见的就是message组件，我们在组件库中看到的多数都是api调用的方式生成。记录自己基本实现message组件。

Vue.extend

在vue中，要实现通过api方式实现组件的使用，这个aip是必不可少的，因此我们先了解下这个全局api的用法，官网说的很晦涩难懂，我的理解就是通过参数传递一个配置对象（这个配置对象就是我们模板中export default的那个对象，例如data,methods,props等等）都可以传递，接下来该函数会根据我们的配置对象生成一个继承自Vue的子组件构造函数，然后我们就可以通过实例化构造函数，生成对应的组件，然后我们就可以挂载到页面了。