我是自定义组件的内容'
})
new Vue({
el: '#app',
});
得到的结果和上述相同。
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属性，将外部的值传入组件模板。最终渲染到页面上面就得到“
你好
”这么一段html动态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 },
]
}
},
});
});
