JS组件系列的MVVM组件构建自己的Vue组件

主体

自从上一个JS组件系列——是另一个MVVM组件：Vue(在1: 30分钟内添加、删除和修改前端)以来，已经有几个月了。今天打算捡起来，发现已经很久没用了，Vue的相关技术点还挺陌生的。过了几个月，Vue发展得很快，但好像和博主没什么关系。博主应该诚实地研究自己的技术。技术上还有很长的路要走，还是做研究吧。

首先，为什么组件很重要

前两天看到一篇关于总结vue开源项目的文章，资源丰富，不得不感叹开源社区的实力。只需要点进去看几个UI组件，基本都不是原生html用法。如果你不懂Vue的组件相关概念，看到一些“奇怪”的标签写法，你可能会用，但你肯定无法理解为什么可以这样写。例如，我们随机找了一个叫IView的人来看一看：

I-input类型=' text ' : value . sync=' formin line . user '占位符=' username '图标类型=' IOs-person-outline ' slot=' prepend '/图标/I-input可以得到如下效果：

博主很好奇，打算一探究竟。今天，让我们来看看这些“怪异”的写作方法的起源。希望通过这篇文章，你会有一种“哦，就是这样，但就是这样！”那种感觉！

二、Vue中组件的基础知识

1、组件的概念

官方定义：组件是Vue.js最强大的功能之一组件可以扩展HTML元素，封装可重用的代码。在更高的层次上，组件是一个自定义元素，Vue.js的编译器为其添加了特殊的功能。在某些情况下，组件也可以是本机HTML元素的形式，这些元素通过is特性进行扩展。

Blogger了解到，Vue中的组件可以理解为封装普通html标签得到的一组独立的、通用的html标签。我们可以通过在页面中使用这些标签传入相应的参数来调用封装的组件。相信通过下图一眼就能看出来。

常见的html标签表单、输入、按钮和标签构成了一个新的元素集，称为i-form，这是vue中组件的概念。当我们在页面中使用i-form/i-form时，它可以通过vue的组件呈现机制在浏览器中显示为普通的html标签表单、输入、按钮和标签。

2.成分原理

从上图中，我们知道vue中的组件实际上是一些常见html元素的集合。那么，它是如何将这些自定义标签转换成普通的html标签的呢？在介绍组件的原理之前，让我们看一个最简单的组件示例。

div style=' text-align : center；' margin-top :200 px；'id='app '！-3.在Vue实例-b-component/b-component/div脚本src=' http : content/Vue/dist/Vue . js '/script script type=' text/JAVAScript '/1中使用组件。创建组件构造函数var my component=vue . extend({ template : ' div id=' b component ' I是自定义组件的内容/div ' })；//2.将组件注册到vue.component ('b-component '，my component)new vue({ El : ' # app '，})；/script获得效果：

整个过程不难理解，主要分为三大步骤：

定义一个组件构造器，声明组件要呈现的html内容，在Vue的组件系统中注册组件构造器，使其成为Vue的组件，并给组件起一个名字，例如b-component在Vue的实例中使用组件。因为上面两个步骤定义了Vue的组件，既然它们是Vue的组件，要使用组件，首先必须有一个Vue的实例，并且组件必须在Vue的实例中使用。在网上找一张图片，可以清晰的说明组件的整个渲染过程。

事实上，有时为了简单起见，我们经常将步骤1和2结合起来，代码如下：

div style=' text-align : center；' margin-top :200 px；'id='app '！-2.在Vue实例-b-component/b-component/div脚本src=' http : content/Vue/dist/Vue . js '/script script type=' text/JAVAScript '/1中使用组件。创建组件构造函数。将组件注册到vue.component ('b-component '，{ template : ' div ID=' b component ' I是自定义组件的内容/div' })新Vue({ el: '#app '，})；/script给出与上面相同的结果。

3.组件的使用

以上解释了以下组件的定义和原理。关于组件的简单性和实用性，我们主要介绍以下几个方面。

(1)构件的范围

应该很容易理解组件分为全局组件和本地组件。也就是说，可以在页面上定义一个全局组件，页面上的任何Vue实例都可以使用；至于本地组件，它们与特定的Vue实例相关，只能在当前的Vue实例中使用。还有一点需要注意：组件必须在Vue实例中使用，在Vue实例之外使用组件是无效的。下面的例子可以清楚地说明这种差异。

body div style=' text-align : center；' margin-top :50 px；'id=' app ' B- component/B- component B- component 2/B- component 2/div style=' text-align : center；' margin-top :50 px；'id=' app 2 ' B- component/B- component B- component 2/B- component 2/div B- component/B- component B- component 2/B- component 2脚本src=' http : content/vue/Dist/vue . js '/script script type=' text/JavaScript '/定义组件vue.component ('b-component '，{ template : ' div id=' b component '我是全局组件。/div'}可用于任何Vue实例)新vue ({el:' # app '，components 3360 { ' B- components 2 ' : { template 3360 ' div id=' b component '我是本地组件，所以只能使用/div ' } } } })；new Vue({ el: '#app2 '，})；/script/body获取结果：

(2)组件的价值转移

组件实例的范围是独立的。这意味着父组件的数据不能也不应该在子组件的模板中直接引用。您可以使用道具将数据传递给子组件。如何理解这段话？让我们从几个例子开始。

静态道具

让我们先看看下面的简单代码

body div style=' text-align : center；' margin-top :50 px；'id=' app ' B- component message=' hello '/B- component/div script src=' http : content/Vue/dist/Vue . js '/script script type=' text/JavaScript ' Vue.component(' B- component '，{ template : ' div { { component message } }/div '，prop :[' component message ']，})new Vue({ El : ' # app ' })；/script/body通过使用组件中的props属性将外部值传递到组件模板中。最后，当你在页面上渲染它时，你会得到“div hello /div”的html

动态道具

在大多数情况下，当我们使用Vue实例时，我们通常通过数据属性传递模型，例如

new Vue({ el: '#app '，data: { name: 'Jim '，age : ' 28 ' })；此时，如何将我们的姓名和年龄传递给组件实例？

body div style=' text-align : center；' margin-top :50 px；'id=' app ' B-组件v-bind : my-name=' name ' v-bind : my-Age=' Age '/B-组件/div脚本src=' http : content/Vue/dist/Vue . js '/脚本脚本类型=' text/JavaScript ' Vue.component(' B- component '，{ template 3360 ' div name:{ { myName } }，age: {{myage}}/div '，prop 3360[]/script/body获取结果

需要说明几点：

在使用标签b-component时，Vue实例中的名称和年龄属性通过v-bind命令以别名my-name和my-age的形式传递到组件实例中。

为什么我的姓名和年龄在传输到组件时会变成['我的姓名'，'我的年龄']？这是因为在子组件中定义道具时使用了camelCase命名法。因为HTML特性不区分大小写，所以当camelCase的prop用于特性时，需要将其转换为烤肉串大小写(用短水平线分隔)。

在很多情况下，v-bind可以缩写为冒号(:)，所以上面的代码也可以写成这样：B- component : my-name=' name ' 3360 my-age=' age '/B- component。效果是一样的。

这里还有一件恶心的事情，Props中定义的变量一定要用所谓的“驼峰式”来定义，否则你会因为一个变量名的情况而被杀。例如，prop :[' my name ']是正确的，但如果prop :[' my name ']是正确的，那就错了。使用myname将是未定义的。博主第一次找这个东西找了很久。初学者一定要注意。大坑，大坑，大坑！小心点！

在包组件中，道具属性被大量使用，更多的道具用法可以在文档https://vuefe.cn/v2/guide/components.html#Prop中找到

(3)组件插槽

使用组件时，我们经常需要在组件实例中将html元素传递到组件模板中。这时，我们需要在组件的模板标签中留下一些占位符(俗称“坑”)，然后将标签传递到特定的组件实例中来填充“坑”。Vue中的这些“坑”也叫槽，用槽来解决。对于开发者来说，这并不陌生。从最初的母版页到现在的布局页，基本都是用这个原理。

body div style=' text-align : center；' margin-top :50 px；'id=' app ' B- component h1 slot=' header '这里可能是一个页面标题/h1 h2 slot='content '名称：{{name}}，Age:{ { Age } }/H2 h1 slot=' footer ' tail/h1/B- component/div模板id=' slot test ' div class=' container ' header slot name=' header '/slot/header主slot name=' content '/slot/主页脚slot name=' footer '/slot/footer/div/模板脚本src=' http : content/Vue//script/body获取结果

上面的代码应该很容易理解，就是一个“挖坑”和“填坑”的过程。顺便说一下，Vue的组件支持使用template来定义标签模板，使用起来更加灵活方便。

第三，打包您自己的组件

以上提到的都是Vue中关于Component组件的一些主要知识点，还有很多没有展开，因为这方面的文档相当丰富。《花园里的keepfool》的博文非常详细地介绍了Vue的组件，而且Vue的中文文档也有非常详细的使用说明。接下来，博主打算通过几个例子来说明使用组件对我们前端开发的好处。

1.带有组件的包引导表

对于项目中的表格显示，可以基于Vue开发一套，但说实话，项目量还是挺大的，要想做好，还得兼容很多表格功能，所以从头开始反复造轮子有点太费时间了。blogger项目中的大多数表都使用了bootstrapTable组件，所以blogger们一直在想是否可以封装一组基于Vue的bootstrapTable用法。互联网上没有类似的打包例子，大多数使用vue的框架都会实现自己的表格样式。所以我打算自己试试，只是为了熟悉组件的用法。

首先，创建一个名为vue.bootstrapTable.js的新js文件.博主直接贴出代码。如果有不完美的地方，希望大家改正。

（函数($) { //表格初始化的默认参数var defaults={ method: 'get '，toolbar: '#toolbar '，striped: true，cache: false，pagination: true，}；//注册bootstrapTable组件Vue.component('bootstrap-table '，{ template: 'table/table '，prop s : { ' tableParam ' : { type : Object } }，//组件渲染之前created:函数(){//调试器；}, //组件渲染之后已安装：函数(){调试器；var params=$ .扩展({}，默认值，这个。TableParam | | { })；this.bootstraptable=$(this .$el).bootstrapTable(参数);} });})(jQuery)；然后再界面上面

hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/title/title link href=' Content/bootstrap/CSS/bootstrap。CSS ' rel=' external nofollow ' rel=' external nofollow ' rel='样式表/link href=' Content/引导表/引导表。CSS“rel=”外部no follow“rel=”样式表'/流浆池div id=' app ' bootstrap-table : table-param=' table param '/bootstrap-table/div脚本src='http3鸡母格林},{姓名： '凯特'，年龄： 28岁，备注： '凯特},{姓名： '露西，年龄： 20,备注： '露西},{姓名： '王叔叔，年龄： 45岁，备注： '严厉的王老师' } ];新Vue({ el: '#app '，数据： { tableparam : { data : testData }，列3360 [{ field : ' Name '，title: '姓名}，{ field: 'Age '，title: '年龄}，{ field: '备注，标题： '备注' }] }, } });/脚本/正文最后测试结果：

纵观这数十行代码，基本原来其实很简单，通过组件的小道具功能将自举表实例中的初始化参数传到组件模板里面，然后再组件加载完成之后初始化bootstrapTable，最后将bootstrapTable的实例给到组件，这样在就可以通过某视频剪辑软件的实例通过子组件调用到当前初始化的bootstrapTable对象。

2、封装挑选

关于挑选的封装，还是打算基于第三方组件来做。同样的，我们新建一个射流研究…文件，命名为vue.bootstrapSelect.js，其代码如下：

（函数($) { $('body ').追加('模板id=' bootstrapSelect ' ' ' select class=' select picker ' v-if=' my multiple ' v-bind : data-live-search=' my search ' multiple ' '选项v-for='我的数据源' v-bind : value=' item。值“{ item。text } }/option ' '/select ' ' ' class=' select picker ' v-else v-bind : data-live-search=' my search ' ' ' option v-for=' item data source ' vue。组件('引导-选择'，{模板： ' #引导-选择'，道具：['我的数据源'，'我的多重'，'我的搜索']，//组件渲染之前created:函数(){ },//组件渲染之后挂载ed :函数(){ } })；})(jQuery)；页面使用

html xmlns=' http://www。w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8/多选search: true，//搜索数据：[{ text : }北京市，value: 1 }，{ text: '上海市，value: 2 }，{ text: '重庆市，value: 3 }，] } }，})；});/脚本/正文/html得到效果：

然后可配置多选，将初始化参数多个的设置为真实的即可。

为什么模板里面会有两个挑选标签？原因就在于那个多重的，因为只要标签里面出现了多重，选择就自动多选，把多个的的值设置为任何属性都不好使，这不做了一个如果判断，如果哪位有更好的方法，欢迎指出，不胜感激！

3、查看其他某视频剪辑软件框架源码

现在再来看文章的开头那段超文本标记语言

我输入类型=' text ' :值。sync=' forminline。用户占位符=“用户名”图标类型=' iOS-人物-轮廓'槽='前置'/图标/I-输入结合某视频剪辑软件组件的文档，其实上述就是一个对投入标签做的封装。

当然，以上只是成分的基础，组件的封装还得结合很多其他的东西，要读懂那些框架的源码还需要学习一些其他知识，但至少通过本文希望能够让你了解这些东西的由来。

以上所述是小编给大家介绍的射流研究…组件系列之MVVM组件构建自己的某视频剪辑软件组件，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！