又一款MVVM组件 构建自己的Vue组件2 - 编程之家
得到效果:
整个过程不难理解,主要分为三个大的步骤:
- 定义一个组件构造器,声明组件要渲染的html内容
- 将组件构造器注册到Vue的组件系统里面,使其成为Vue的一个组件,给组件取一个名称,比如b-component
- 在Vue的实例里面使用组件。因为上面两步定义了Vue的组件,既然是Vue的组件,那么要使用组件,首先得有一个Vue的实例,组件必须要在Vue的实例里面使用。
在网上找到一张图可以清晰地解释组件的整个渲染过程。
其实有时为了简便,我们常将1、2步合并,代码如下:
<script src="Content/vue/dist/vue.js">
<script type="text/javascript">
//1.创建组件构造器,注册组件到vue里面
Vue.component('b-component',{
template: '<div id="bComponent">我是自定义组件的内容
'
})
new Vue({
el: '#app',});
得到的结果和上述相同。
3、组件使用
上述解释了下组件的定义和原理,关于组件的简单实用,我们主要介绍以下几个方面。
(1)组件的作用域
这个应该不难理解,组件分为全局组件和局部组件,也就是说,你可以在页面上面定义一个全局组件,页面上面的任何Vue实例都可使用;而对于局部组件,是和具体的Vue实例相关的,只能在当前Vue实例里面使用组件。还有一点需要说明:组件必须在Vue的实例里面使用,在Vue实例之外使用组件无效。通过下面一个例子即可清晰说明它们的区别。
<script src="Content/vue/dist/vue.js">
<script type="text/javascript">
//定义组件
Vue.component('b-component',{
template: '<div id="bComponent">我是全局组件,任何Vue实例都可使用
'
})
new Vue({
el: '#app',components: {
'b-component2': {
template: '<div id="bComponent">我是局部组件,只能在app这个div里面使用
'
}
}
});
new Vue({
el: '#app2',});
得到结果:
(2)组件的传值
组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给子组件。这段话怎么理解呢?我们先来看几个例子。
我们先来看看下面的一段简单的代码
<script src="Content/vue/dist/vue.js">
<script type="text/javascript">
Vue.component('b-component',{
template: '
{{componentmessage}}
',props: ['componentmessage'],})
new Vue({
el: '#app'
});
通过在组件里面使用props属性,将外部的值传入组件模板。最终渲染到页面上面就得到“
你好
”这么一段html
在多数情况下,我们在使用Vue实例的时候,一般通过data属性传入模型,比如
这个时候,我们的name和age如何传到组件实例里面呢?
得到结果
需要说明几点:
在使用标签的时候,通过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用法可参见文档
(3)组件的插槽
在使用组件的时候,我们经常需要在组件实例向组件模板传入html元素,这个时候我们就需要在组件的模板标签里面留一些占位符(俗称“坑”),然后在具体的组件实例里面传入标签来填“坑”,在Vue里面这些“坑”也叫插槽,使用来解决。对于开发人员来说,这个其实不陌生,从原来的母版页到现在的layout页面,基本都是使用的这种原理。
<script src="Content/vue/dist/vue.js">
<script type="text/javascript">
Vue.component('b-component',{
template: '#slottest',Age: '28'
}
});
得到结果
上述代码应该不难理解,就是一个“挖坑”和“填坑”的过程。顺便要提一笔的是,Vue的组件支持使用的模式来定义标签模板,使用更加灵活和方便。
三、封装自己的Component
以上讲了这么多,都是关于Vue里面Component组件的一部分主要知识点,其他还有很多都没有展开说,因为这方面的文档也是相当丰富,园子里面keepfool的博文关于Vue组件的部分就介绍得非常详细,再者,Vue中文文档也是有很详细的用法说明。接下来,博主打算通过几个实例来说明使用组件给我们前端开发带来的好处。
对于项目里面的表格展示,可以基于Vue可以自己开发一套,但是说实话,这个工程量还是蛮大的,并且如果要做好,要兼容很多表格的功能,从零开始去重复造轮子实在是有点太耗时。博主项目里面大部分的表格用的bootstrapTable组件,于是博主一直在想能不能封装一套基于Vue的bootstrapTable的用法。网上也找不到类似的封装示例,大部分使用vue的框架都会自己去实现一套自己的表格样式。于是打算自己动手试试,正好也可以熟悉下component的用法。
首先新建一个js文件命名为vue.bootstrapTable.js。博主直接将代码贴出来,如果有不完善的地方,希望大家斧正。
},//组件渲染之后
mounted: function () {
debugger;
var params = $.extend({},defaults,this.tableParam || {});
this.bootstraptable = $(this.$el).bootstrapTable(params);
}
});
})(jQuery);
然后再界面上面
<script src="Content/jquery-1.9.1.min.js">
<script src="Content/bootstrap/js/bootstrap.js">
<script src="Content/bootstrap-table/bootstrap-table.js">
<script src="Content/vue/dist/vue.js">
<script src="Content/vue-component/vue.bootstrapTable.js">
<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: '备注'
}]
},}
});
最后测试结果:
纵观这数十行代码,基本原来其实很简单,通过组件的props功能将实例中的初始化参数传到组件模板里面,然后再组件加载完成之后初始化bootstrapTable,最后将bootstrapTable的实例给到组件,这样在就可以通过Vue的实例通过子组件调用到当前初始化的bootstrapTable对象。
2、封装select
关于select的封装,还是打算基于第三方组件来做。同样的,我们新建一个js文件,命名为vue.bootstrapSelect.js,其代码如下:
' +
'
页面使用