JS中MVVM组件如何构建Vue组件

这篇文章将为大家详细讲解有关JS中MVVM组件如何构建Vue组件，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

创新互联建站专业为企业提供湟源网站建设、湟源做网站、湟源网站设计、湟源网站制作等企业网站建设、网页设计与制作、湟源企业网站模板建站服务，十余年湟源做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

一、为什么组件很重要

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

这样一段代码就能得到如下效果：

JS中MVVM组件如何构建Vue组件

博主好奇心重，打算一探究竟，今天就和大家一起来看一看这些“古怪”写法的出处。希望通过本文，让你有一种“哦，原来是这样，不过如此嘛！”的感觉！

二、Vue里面的组件基础知识

1、组件的概念

官方定义：组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素， Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。

博主理解：Vue里面的组件可以理解为通过对普通html标签的封装，得到一套独立而且可以通用的html标签，我们在页面里面使用这些标签传入相应的参数即可调用封装好的组件。通过下面这张图相信可以一目了然。

JS中MVVM组件如何构建Vue组件

由普通的html标签form、input、button、label组成了一个新的元素集合，我们命名为i-form，这个i-form就是vue里面组件的概念。我们在页面里面使用时，通过vue的组件渲染机制，在浏览器里面最终就可以显示成为普通的html标签form、input、button、label。

2、组件原理

通过上图我们知道，vue里面的组件实际上就是一些普通html元素的集合。那么，它是如何将这些自定义标签转换为普通html标签的呢？在介绍组件原理之前，还是先来看一个最简单的组件实例。

// 1.创建组件构造器 var myComponent = Vue.extend({ template: '我是自定义组件的内容

' }); //2.注册组件到vue里面 Vue.component('b-component', myComponent) new Vue({ el: '#app', });

得到效果：

JS中MVVM组件如何构建Vue组件

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

定义一个组件构造器，声明组件要渲染的html内容
将组件构造器注册到Vue的组件系统里面，使其成为Vue的一个组件，给组件取一个名称，比如b-component
在Vue的实例里面使用组件。因为上面两步定义了Vue的组件，既然是Vue的组件，那么要使用组件，首先得有一个Vue的实例，组件必须要在Vue的实例里面使用。

在网上找到一张图可以清晰地解释组件的整个渲染过程。

JS中MVVM组件如何构建Vue组件

其实有时为了简便，我们常将1、2步合并，代码如下:

//定义组件 Vue.component('b-component', { template: '我是全局组件，任何Vue实例都可使用' }) new Vue({ el: '#app', components: { 'b-component2': { template: '我是局部组件，只能在app这个div里面使用' } } }); new Vue({ el: '#app2', });

Vue.component('b-component', { template: '

姓名：{{myName}}，年龄：{{myAge}}

', props: ['myName', 'myAge'], }) new Vue({ el: '#app', data: { name: 'Jim', Age: '28' } });

这里可能是一个页面标题姓名：{{name}}，年龄：{{Age}} 尾部

Vue.component('b-component', { template: '#slottest', }) new Vue({ el: '#app', data: { name: 'Jim', Age: '28' } });

(function ($) { //表格初始化的默认参数 var defaults = { method: 'get', toolbar: '#toolbar', striped: true, cache: false, pagination: true, }; //注册bootstrapTable组件 Vue.component('bootstrap-table', { template: '

', props: { 'tableParam': { type: Object } }, //组件渲染之前 created: function () { //debugger; }, //组件渲染之后 mounted: function () { debugger; var params = $.extend({}, defaults, this.tableParam || {}); this.bootstraptable = $(this.$el).bootstrapTable(params); } }); })(jQuery);

var testData = [ { Name: 'Jim', Age: 30, Remark: '鸡母格林' }, { Name: 'Kate', Age: 28, Remark: '凯特' }, { Name: 'Lucy', Age: 20, Remark: '露西' }, { Name: 'Uncle Wang', Age: 45, Remark: '严厉的王老师' } ]; new Vue({ el: '#app', data: { tableParam: { data: testData, columns: [ { field: 'Name', title:'姓名' }, { field: 'Age', title: '年龄' }, { field: 'Remark', title: '备注' }] }, } });

$(function () { var vm = new Vue({ el: '#app', data: { selectOptions:{ multiple: false,//多选 search: true,//搜索 data: [ { text: "北京市", value: 1 }, { text: "上海市", value: 2 }, { text: "重庆市", value: 3 }, ] } }, }); });

重庆分公司，新征程启航

JS中MVVM组件如何构建Vue组件

其他资讯