又一款MVVM组件构建自己的Vue组件（2）

2024-11-27 05:53:50

前言：转眼距离上篇JS组件系列——又一款MVVM组件：Vue（一：30分钟搞定前端增删改查）已有好几个月了，今天打算将它捡起来，发现好久不用，Vue相关技术点都生疏不少。经过这几个月的时间，Vue的发展也是异常迅猛，不过这好像和博主都没什么太大的关系，博主还是老老实实研究自己的技术吧。技术之路还很长，且行且研究吧。

一、为什么组件很重要

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

<i-input type="text" :value.sync="formInline.user" placeholder="Username">
 <Icon type="ios-person-outline" slot="prepend"></Icon>
</i-input>

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

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

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

1、组件的概念

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

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

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

2、组件原理

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

<div style="text-align:center;margin-top:200px;" id="app">
 <!-- 3. 在Vue实例里面使用组件-->
 <b-component></b-component>
 </div>

 <script src="Content/vue/dist/vue.js"></script>
 <script type="text/javascript">
 // 1.创建组件构造器
 var myComponent = Vue.extend({
  template: '<div id="bComponent">我是自定义组件的内容</div>'
 });

 //2.注册组件到vue里面
 Vue.component('b-component', myComponent)

 new Vue({
  el: '#app',
 });

 </script>

得到效果：

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

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

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

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

<div style="text-align:center;margin-top:200px;" id="app">
 <!-- 2. 在Vue实例里面使用组件-->
 <b-component></b-component>
 </div>

 <script src="Content/vue/dist/vue.js"></script>
 <script type="text/javascript">
 //1.创建组件构造器，注册组件到vue里面
 Vue.component('b-component', {
  template: '<div id="bComponent">我是自定义组件的内容</div>'
 })

 new Vue({
  el: '#app',
 });

 </script>

得到的结果和上述相同。

3、组件使用

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

（1）组件的作用域

这个应该不难理解，组件分为全局组件和局部组件，也就是说，你可以在页面上面定义一个全局组件，页面上面的任何Vue实例都可使用；而对于局部组件，是和具体的Vue实例相关的，只能在当前Vue实例里面使用组件。还有一点需要说明：组件必须在Vue的实例里面使用，在Vue实例之外使用组件无效。通过下面一个例子即可清晰说明它们的区别。

<body>
 <div style="text-align:center;margin-top:50px;" id="app">
 <b-component></b-component>
 <b-component2></b-component2>
 </div>
 <div style="text-align:center;margin-top:50px;" id="app2">
 <b-component></b-component>
 <b-component2></b-component2>
 </div>

 <b-component></b-component>
 <b-component2></b-component2>

 <script src="Content/vue/dist/vue.js"></script>
 <script type="text/javascript">

 //定义组件
 Vue.component('b-component', {
  template: '<div id="bComponent">我是全局组件，任何Vue实例都可使用</div>'
 })

 new Vue({
  el: '#app',
  components: {
  'b-component2': {
   template: '<div id="bComponent">我是局部组件，只能在app这个div里面使用</div>'
  }
  }
 });
 new Vue({
  el: '#app2',
 });

 </script>
</body>

得到结果：

（2）组件的传值

组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给子组件。这段话怎么理解呢？我们先来看几个例子。

静态Prop

我们先来看看下面的一段简单的代码

<body>
 <div style="text-align:center;margin-top:50px;" id="app">
 <b-component componentmessage="你好"></b-component>
 </div>

 <script src="Content/vue/dist/vue.js"></script>
 <script type="text/javascript">
 Vue.component('b-component', {
  template: '<div>{{componentmessage}}</div>',
  props: ['componentmessage'],
 })

 new Vue({
  el: '#app'
 });
 </script>
</body>

通过在组件里面使用props属性，将外部的值传入组件模板。最终渲染到页面上面就得到“<div>你好</div>”这么一段html

动态Prop

在多数情况下，我们在使用Vue实例的时候，一般通过data属性传入模型，比如

new Vue({
   el: '#app',
   data: {
    name: 'Jim',
    Age: '28'
   }
  });

这个时候，我们的name和age如何传到组件实例里面呢？

<body>
 <div style="text-align:center;margin-top:50px;" id="app">
  <b-component v-bind:my-name="name" v-bind:my-age="Age"></b-component>
 </div>
 <script src="Content/vue/dist/vue.js"></script>
 <script type="text/javascript">
  Vue.component('b-component', {
   template: '<div>姓名：{{myName}}，年龄：{{myAge}}</div>',
   props: ['myName', 'myAge'],
  })

  new Vue({
   el: '#app',
   data: {
    name: 'Jim',
    Age: '28'
   }
  });
 </script>
</body>

得到结果

需要说明几点：

在使用标签<b-component>的时候，通过v-bind命令，将Vue实例里面的name、Age属性以别名my-name、my-age的形式传入组件实例。

为什么my-name、my-age传到组件里面就变成了['myName', 'myAge']呢？这是因为在子组件中定义prop时，使用了camelCase命名法。由于HTML特性不区分大小写，camelCase的prop用于特性时，需要转为 kebab-case（短横线隔开）。

很多情况下，v-bind可以简写为冒号（:），所以上述代码也可以这么写：<b-component :my-name="name" :my-age="Age"></b-component>。效果也是一样。

这里很恶心的还有一点，在Props里面定义的必须要使用所谓“驼峰式”的方式来定义变量，否则会因为一个变量名大小写搞死你。比如props:["myName"]这样可以正确，但是如果props:["myname"]这样的话就错误，使用myname取值会是undefined。博主第一次玩这个玩意找了好半天，新手一定注意，大坑，大坑，大坑！慎入！

在封装组件里面，props属性使用非常多，更多props用法可参见文档https://vuefe.cn/v2/guide/components.html

（3）组件的插槽

在使用组件的时候，我们经常需要在组件实例向组件模板传入html元素，这个时候我们就需要在组件的模板标签里面留一些占位符（俗称“坑”），然后在具体的组件实例里面传入标签来填“坑”，在Vue里面这些“坑”也叫插槽，使用<slot>来解决。对于开发人员来说，这个其实不陌生，从原来的母版页到现在的layout页面，基本都是使用的这种原理。

<body>
 <div style="text-align:center;margin-top:50px;" id="app">
  <b-component>
   <h1 slot="header">这里可能是一个页面标题</h1>
   <h2 slot="content">姓名：{{name}}，年龄：{{Age}}</h2>
   <h1 slot="footer">尾部</h1>
  </b-component>
 </div>
 <template id="slottest">
  <div class="container">
   <header>
    <slot name="header"></slot>
   </header>
   <main>
    <slot name="content"></slot>
   </main>
   <footer>
    <slot name="footer"></slot>
   </footer>
  </div>
 </template>

 <script src="Content/vue/dist/vue.js"></script>
 <script type="text/javascript">

  Vue.component('b-component', {
   template: '#slottest',
  })

  new Vue({
   el: '#app',
   data: {
    name: 'Jim',
    Age: '28'
   }
  });
 </script>
</body>

得到结果

上述代码应该不难理解，就是一个“挖坑”和“填坑”的过程。顺便要提一笔的是，Vue的组件支持使用<templete>的模式来定义标签模板，使用更加灵活和方便。

三、封装自己的Component

以上讲了这么多，都是关于Vue里面Component组件的一部分主要知识点，其他还有很多都没有展开说，因为这方面的文档也是相当丰富，园子里面keepfool的博文关于Vue组件的部分就介绍得非常详细，再者，Vue中文文档也是有很详细的用法说明。接下来，博主打算通过几个实例来说明使用组件给我们前端开发带来的好处。

1、使用Component封装bootstrapTable

对于项目里面的表格展示，可以基于Vue可以自己开发一套，但是说实话，这个工程量还是蛮大的，并且如果要做好，要兼容很多表格的功能，从零开始去重复造轮子实在是有点太耗时。博主项目里面大部分的表格用的bootstrapTable组件，于是博主一直在想能不能封装一套基于Vue的bootstrapTable的用法。网上也找不到类似的封装示例，大部分使用vue的框架都会自己去实现一套自己的表格样式。于是打算自己动手试试，正好也可以熟悉下component的用法。

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

(function ($) {
 //表格初始化的默认参数
 var defaults = {
  method: 'get',
  toolbar: '#toolbar',
  striped: true,
  cache: false,
  pagination: true,
 };
 //注册bootstrapTable组件
 Vue.component('bootstrap-table', {
  template: '<table></table>',
  props: {
   'tableParam': { type: Object }
  },
  //组件渲染之前
  created: function () {
   //debugger;

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

})(jQuery);

然后再界面上面

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title></title>
 <link href="Content/bootstrap/css/bootstrap.css" rel="stylesheet" />
 <link href="Content/bootstrap-table/bootstrap-table.css" rel="stylesheet" />
</head>
<body>
 <div id="app">
  <bootstrap-table :table-param="tableParam"></bootstrap-table>
 </div>

 <script src="Content/jquery-1.9.1.min.js"></script>
 <script src="Content/bootstrap/js/bootstrap.js"></script>
 <script src="Content/bootstrap-table/bootstrap-table.js"></script>
 <script src="Content/vue/dist/vue.js"></script>
 <script src="Content/vue-component/vue.bootstrapTable.js"></script>
 <script type="text/javascript">
  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: '备注'
      }]
    },
   }
  });

 </script>
</body>

最后测试结果：

纵观这数十行代码，基本原来其实很简单，通过组件的props功能将<bootstrap-table>实例中的初始化参数传到组件模板里面，然后再组件加载完成之后初始化bootstrapTable，最后将bootstrapTable的实例给到组件，这样在就可以通过Vue的实例通过子组件调用到当前初始化的bootstrapTable对象。

2、封装select

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

(function ($) {
 $("body").append('<template id="bootstrapSelect">' +
  '<select class="selectpicker" v-if="myMultiple" v-bind:data-live-search="mySearch" multiple>' +
   '<option v-for="item in myDatasource" v-bind:value="item.value">{{item.text}}</option>'
  +'</select>' +
  '<select class="selectpicker" v-else v-bind:data-live-search="mySearch">' +
   '<option v-for="item in myDatasource" v-bind:value="item.value">{{item.text}}</option>'
  +'</select>' +
 '</template>');

 Vue.component('bootstrap-select', {
  template: '#bootstrapSelect',
  props: ['myDatasource', 'myMultiple', 'mySearch'],
  //组件渲染之前
  created: function () {
  },
  //组件渲染之后
  mounted: function () {
  }
 });

})(jQuery);

页面使用

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title></title>
 <link href="Content/bootstrap/css/bootstrap.css" rel="stylesheet" />
 <link href="Content/bootstrap-table/bootstrap-table.css" rel="stylesheet" />
 <link href="Content/bootstrap-select/css/bootstrap-select.css" rel="stylesheet" />
</head>
<body>
 <div id="app">
  <bootstrap-select :my-datasource="selectOptions.data"
       :my-multiple="selectOptions.multiple"
       :my-search="selectOptions.search">
  </bootstrap-select>
 </div>
 <script src="Content/jquery-1.9.1.min.js"></script>
 <script src="Content/bootstrap/js/bootstrap.js"></script>
 <script src="Content/bootstrap-table/bootstrap-table.js"></script>
 <script src="Content/bootstrap-select/js/bootstrap-select.js"></script>
 <script src="Content/bootstrap-select/js/i18n/defaults-zh_CN.js"></script>
 <script src="Content/vue/dist/vue.js"></script>
 <script src="Content/vue-component/vue.bootstrapSelect.js"></script>
 <script type="text/javascript">
  $(function () {
   var vm = new Vue({
    el: '#app',
    data: {
     selectOptions:{
      multiple: false,//多选
      search: true,//搜索
      data: [
       { text: "北京市", value: 1 },
       { text: "上海市", value: 2 },
       { text: "重庆市", value: 3 },
      ]
     }
    },
   });
  });
 </script>
</body>
</html>

得到效果：

然后可配置多选，将初始化参数multiple设置为true即可。

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

3、查看其他Vue框架源码

现在再来看文章的开头那段html

<i-input type="text" :value.sync="formInline.user" placeholder="Username">
  <Icon type="ios-person-outline" slot="prepend"></Icon>
</i-input>

结合Vue组件的文档，其实上述就是一个对input标签做的封装。

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

四、总结

本篇到此结束，通过本文，相信你对Vue的component有了一个大概的了解。接下来如果有时间将结合webpack介绍Vue的一些高级用法。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

Vue原理剖析实现双向绑定MVVM

本文能帮你做什么? 1.了解vue的双向数据绑定原理以及核心代码模块 2.缓解好奇心的同时了解如何实现双向绑定为了便于说明原理与实现,本文相关代码主要摘自vue源码, 并进行了简化改造,相对较简陋,并未考虑到数组的处理.数据的循环依赖等,也难免存在一些问题,欢迎大家指正.不过这些并不会影响大家的阅读和理解,相信看完本文后对大家在阅读vue源码的时候会更有帮助< 本文所有相关代码均在github上面可找到 https://github.com/DMQ/mvvm 相信大家对mvvm双向绑定应该都不
JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查

正文前言:关于Vue框架,好几个月之前就听说过,了解一项新技术之后,总是处于观望状态,一直在犹豫要不要系统学习下.正好最近有点空,就去官网了解了下,看上去还不错的一个组件,就抽空研究了下.最近园子里vue也确实挺火,各种入门博文眼花缭乱,博主也不敢说写得多好,就当是个学习笔记,有兴趣的可以看看. 一.MVVM大比拼关于MVVM,原来在介绍knockout.js的时候有过讲解,目前市面上比较火的MVVM框架也是一抓一大把,比如常见的有Knockout.js.Vue.js.AvalonJS.An
Vue的MVVM实现方法

本文介绍了Vue的MVVM实现方法,分享给大家,具体如下: 1. Object.defineProperty() 定义属性用意:给一个对象定义属性,那个属性原来是不存在的.这是一个初衷,属性是不存在的,需要额外添加. ①.使用说明 Object.defineProperty(obj,props) 第一个参数是将被添加或者修改的属性的对象第二个参数是一个对象,表示将要添加的一个或多个键值对一直要添加属性的具体配置 { '属性名':{value:'...',writable:true},
前端 Vue.js 和 MVVM 详细介绍

MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自动传递给 View,即所谓的数据双向绑定. Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 JavaScript 库,专注于View 层.它的核心是 MVVM 中的 VM,也就是 ViewModel. ViewModel负责连接 View 和 Model,保证视图和数据的一致性,这种轻量
Vue.js 和 MVVM 的注意事项

MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 View Model 的双向数据绑定,这使得View Model的状态改变可以自动传递给 View,这就是所谓的数据双向绑定. Vue.js 是一个提供 MVVM 风格的双向数据绑定的 Javascript 库,专注于View 层.它的核心是 MVVM 中的 VM,也就是 ViewModel.ViewModel负责连接 View 和 Model,保证视图和数据的一致性,这种轻
JS组件系列之MVVM组件构建自己的Vue组件

正文前言:转眼距离上篇 JS组件系列--又一款MVVM组件:Vue(一:30分钟搞定前端增删改查) 已有好几个月了,今天打算将它捡起来,发现好久不用,Vue相关技术点都生疏不少.经过这几个月的时间,Vue的发展也是异常迅猛,不过这好像和博主都没什么太大的关系,博主还是老老实实研究自己的技术吧.技术之路还很长,且行且研究吧. 一.为什么组件很重要前两天,看到一篇关于汇总vue开源项目的文章,资源非常丰富,不得不感叹开源社区的强大.随便点进去看了几个UI组件,基本都不是原生的html用法,如
又一款MVVM组件构建自己的Vue组件（2）

前言:转眼距离上篇JS组件系列--又一款MVVM组件:Vue(一:30分钟搞定前端增删改查)已有好几个月了,今天打算将它捡起来,发现好久不用,Vue相关技术点都生疏不少.经过这几个月的时间,Vue的发展也是异常迅猛,不过这好像和博主都没什么太大的关系,博主还是老老实实研究自己的技术吧.技术之路还很长,且行且研究吧. 一.为什么组件很重要前两天,看到一篇关于汇总vue开源项目的文章,资源非常丰富,不得不感叹开源社区的强大.随便点进去看了几个UI组件,基本都不是原生的html用法,如果你不懂Vue
vue2.0 自定义组件的方法（vue组件的封装）

一.前言之前的博客聊过 vue2.0和react的技术选型:聊过vue的axios封装和vuex使用.今天简单聊聊 vue 组件的封装. vue 的ui框架现在是很多的,但是鉴于移动设备的复杂性,兼容性问题突出.像 Mint-UI 等说实话很不错了,但是坑也是不少,而且很多功能也是仅凭这些实现不了,这需要我们去封装自己的可复用组件二.封装组件的步骤 1. 建立组件的模板,先把架子搭起来,写写样式,考虑你的组件的基本逻辑. os:思考1小时,码码10分钟,程序猿的准则. 2. 准备组件的好数据
Cookbook组件形式：优化 Vue 组件的运行时性能

Vue 2.0 在发布之初,就以其优秀的运行时性能著称,你可以通过这个第三方 benchmark来对比其他框架的性能.Vue 使用了 Virtual DOM 来进行视图渲染,当数据变化时,Vue 会对比前后两棵组件树,只将必要的更新同步到视图上. Vue 帮我们做了很多,但对于一些复杂场景,特别是大量的数据渲染,我们应当时刻关注应用的运行时性能. 本文仿照Vue Cookbook组织形式,对优化 Vue 组件的运行时性能进行阐述. 基本的示例在下面的示例中,我们开发了一个树形控件,支持基本的树
详解vue组件基础

什么是组件组件(Component)是对数据和方法的简单封装.web中的组件其实可以看成是页面的一个组成部分,它是一个具有独立的逻辑和功能的界面,同时又能根据规定的接口规则进行相互融和,最终成为一个完整的应用,页面就是由一个个类似这样的组成部分组成的,比如导航.列表.弹窗.下拉菜单等.页面只不过是这样组件的容器,组件自由组合形成功能完整的界面,当不需要某个组件,或者想要替换某个组件时,可以随时进行替换和删除,而不影响整个应用的运行..前端组件化的核心思想就是将一个巨大复杂的东西拆分成粒度合理的
Vue组件开发技巧总结

前言临近毕业,写了个简单个人博客,项目地址是点我访问项目地址(顺便求star),本篇是系列总结第一篇.接下来会一步一步模仿一个低配版的Element 的对话框和弹框组件. 正文 Vue 单文件组件开发当使用vue-cli初始化一个项目的时候,会发现src/components文件夹下有一个HelloWorld.vue文件,这便是单文件组件的基本开发模式. // 注册 Vue.component('my-component', { template: '<div>A custom compo
vue组件与复用详解

一.什么是组件组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码. 二.组件用法组件需要注册后才可以使用,注册有全局注册和局部注册两种方式. 2.1 全局注册后,任何V ue 实例都可以使用.如: <div id="app1"> <my-component></my-component> </div> Vue.component('my-component',{ templ
vue组件name的作用小结

我们在写vue项目的时候会遇到给组件命名这里的name非必选项,看起来好像没啥用处,但是实际上这里用处还挺多的 export default { name:'xxx' } 1.当项目使用keep-alive时,可搭配组件name进行缓存过滤举个例子: 我们有个组件命名为detail,其中dom加载完毕后我们在钩子函数mounted中进行数据加载 export default { name:'Detail' }, mounted(){ this.getInfo(); }, methods:{
Vue组件模板及组件互相引用代码实例

1. vue组件都是由这三部分组成 <template> <div> </div> </template> <script> export default{} </script> <style> </style> 2. 组件间的引用分3步走,假设现在有两个组件 App.vue,和 Add.vue,现在要把Add.vue组件引入到App.vue组件中 App.vue <template> // 第3
详解Vue组件复用和扩展之道

概述软件编程有一个重要的原则是 D.R.Y(Don't Repeat Yourself),讲的是尽量复用代码和逻辑,减少重复.组件扩展可以避免重复代码,更易于快速开发和维护.那么,扩展 Vue 组件的最佳方法是什么? Vue 提供了不少 API 和模式来支持组件复用和扩展,你可以根据自己的目的和偏好来选择. 本文介绍几种比较常见的方法和模式,希望对你有所帮助. 扩展组件是否必要要知道,所有的组件扩展方法都会增加复杂性和额外代码,有时候还会增加性能消耗. 因此,在决定扩展组件之前,最好先看看有

又一款MVVM组件 构建自己的Vue组件（2）

相关推荐

随机推荐

又一款MVVM组件构建自己的Vue组件（2）