得到的结果和上述相同。

3、组件使用

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

（1）组件的作用域

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

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

得到结果：

（2）组件的传值

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

静态Prop

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

 
  
 
 
 
  Vue.component('b-component', {
   template: '
{{componentmessage}}
',
   props: ['componentmessage'],
  })
  new Vue({
   el: '#app'
  });
 

通过在组件里面使用props属性，将外部的值传入组件模板。最终渲染到页面上面就得到“

动态Prop

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

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

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

 
  
 
 
 
  Vue.component('b-component', {
   template: '
姓名：{{myName}}，年龄：{{myAge}}
',
   props: ['myName', 'myAge'],
  })
  new Vue({
   el: '#app',
   data: {
    name: 'Jim',
    Age: '28'
   }
  });
 

得到结果

需要说明几点：

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

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

很多情况下，v-bind可以简写为冒号（:），所以上述代码也可以这么写： 。效果也是一样。

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

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

（3）组件的插槽

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

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

    
   
   

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

得到结果

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

三、封装自己的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: '',
  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: '备注'
      }]
    },
   }
  });
 

最后测试结果：

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

2、封装select

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

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

页面使用

 
 
 
 


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

得到效果：

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

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

3、查看其他Vue框架源码

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

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

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

关于“JS中MVVM组件如何构建Vue组件”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。