我是自定義組件的內(nèi)容'
})
new Vue({
el: '#app',
});
得到的結(jié)果和上述相同。
3、組件使用
上述解釋了下組件的定義和原理，關(guān)于組件的簡(jiǎn)單實(shí)用，我們主要介紹以下幾個(gè)方面。
（1）組件的作用域
這個(gè)應(yīng)該不難理解，組件分為全局組件和局部組件，也就是說(shuō)，你可以在頁(yè)面上面定義一個(gè)全局組件，頁(yè)面上面的任何Vue實(shí)例都可使用；而對(duì)于局部組件，是和具體的Vue實(shí)例相關(guān)的，只能在當(dāng)前Vue實(shí)例里面使用組件。還有一點(diǎn)需要說(shuō)明：組件必須在Vue的實(shí)例里面使用，在Vue實(shí)例之外使用組件無(wú)效。通過(guò)下面一個(gè)例子即可清晰說(shuō)明它們的區(qū)別。
//定義組件
Vue.component('b-component', {
template: '我是全局組件，任何Vue實(shí)例都可使用'
})
new Vue({
el: '#app',
components: {
'b-component2': {
template: '我是局部組件，只能在app這個(gè)div里面使用'
}
}
});
new Vue({
el: '#app2',
});
得到結(jié)果：
（2）組件的傳值
組件實(shí)例的作用域是孤立的。這意味著不能并且不應(yīng)該在子組件的模板內(nèi)直接引用父組件的數(shù)據(jù)?？梢允褂?props 把數(shù)據(jù)傳給子組件。這段話怎么理解呢？我們先來(lái)看幾個(gè)例子。
靜態(tài)Prop
我們先來(lái)看看下面的一段簡(jiǎn)單的代碼
Vue.component('b-component', {
template: '{{componentmessage}}
',
props: ['componentmessage'],
})
new Vue({
el: '#app'
});
通過(guò)在組件里面使用props屬性，將外部的值傳入組件模板。最終渲染到頁(yè)面上面就得到“
你好
”這么一段html動(dòng)態(tài)Prop
在多數(shù)情況下，我們?cè)谑褂肰ue實(shí)例的時(shí)候，一般通過(guò)data屬性傳入模型，比如
new Vue({
el: '#app',
data: {
name: 'Jim',
Age: '28'
}
});這個(gè)時(shí)候，我們的name和age如何傳到組件實(shí)例里面呢？
Vue.component('b-component', {
template: '姓名：{{myName}}，年齡：{{myAge}}
',
props: ['myName', 'myAge'],
})
new Vue({
el: '#app',
data: {
name: 'Jim',
Age: '28'
}
});
得到結(jié)果
需要說(shuō)明幾點(diǎn)：
在使用標(biāo)簽的時(shí)候，通過(guò)v-bind命令，將Vue實(shí)例里面的name、Age屬性以別名my-name、my-age的形式傳入組件實(shí)例。
為什么my-name、my-age傳到組件里面就變成了['myName', 'myAge']呢？這是因?yàn)樵谧咏M件中定義prop時(shí)，使用了camelCase命名法。由于HTML特性不區(qū)分大小寫，camelCase的prop用于特性時(shí)，需要轉(zhuǎn)為 kebab-case（短橫線隔開）。
很多情況下，v-bind可以簡(jiǎn)寫為冒號(hào)（:），所以上述代碼也可以這么寫：
這里很惡心的還有一點(diǎn)，在Props里面定義的必須要使用所謂“駝峰式”的方式來(lái)定義變量，否則會(huì)因?yàn)橐粋€(gè)變量名大小寫搞死你。比如props:["myName"]這樣可以正確，但是如果props:["myname"]這樣的話就錯(cuò)誤，使用myname取值會(huì)是undefined。博主第一次玩這個(gè)玩意找了好半天，新手一定注意，大坑，大坑，大坑！慎入！
在封裝組件里面，props屬性使用非常多，更多props用法可參見文檔https://vuefe.cn/v2/guide/components.html#Prop
（3）組件的插槽
在使用組件的時(shí)候，我們經(jīng)常需要在組件實(shí)例向組件模板傳入html元素，這個(gè)時(shí)候我們就需要在組件的模板標(biāo)簽里面留一些占位符（俗稱“坑”），然后在具體的組件實(shí)例里面?zhèn)魅霕?biāo)簽來(lái)填“坑”，在Vue里面這些“坑”也叫插槽，使用來(lái)解決。對(duì)于開發(fā)人員來(lái)說(shuō)，這個(gè)其實(shí)不陌生，從原來(lái)的母版頁(yè)到現(xiàn)在的layout頁(yè)面，基本都是使用的這種原理。
這里可能是一個(gè)頁(yè)面標(biāo)題
姓名：{{name}}，年齡：{{Age}}
尾部
Vue.component('b-component', {
template: '#slottest',
})
new Vue({
el: '#app',
data: {
name: 'Jim',
Age: '28'
}
});
得到結(jié)果
上述代碼應(yīng)該不難理解，就是一個(gè)“挖坑”和“填坑”的過(guò)程。順便要提一筆的是，Vue的組件支持使用的模式來(lái)定義標(biāo)簽?zāi)０?，使用更加靈活和方便。
三、封裝自己的Component
以上講了這么多，都是關(guān)于Vue里面Component組件的一部分主要知識(shí)點(diǎn)，其他還有很多都沒有展開說(shuō)，因?yàn)檫@方面的文檔也是相當(dāng)豐富，園子里面keepfool的博文關(guān)于Vue組件的部分就介紹得非常詳細(xì)，再者，Vue中文文檔也是有很詳細(xì)的用法說(shuō)明。接下來(lái)，博主打算通過(guò)幾個(gè)實(shí)例來(lái)說(shuō)明使用組件給我們前端開發(fā)帶來(lái)的好處。
1、使用Component封裝bootstrapTable
對(duì)于項(xiàng)目里面的表格展示，可以基于Vue可以自己開發(fā)一套，但是說(shuō)實(shí)話，這個(gè)工程量還是蠻大的，并且如果要做好，要兼容很多表格的功能，從零開始去重復(fù)造輪子實(shí)在是有點(diǎn)太耗時(shí)。博主項(xiàng)目里面大部分的表格用的bootstrapTable組件，于是博主一直在想能不能封裝一套基于Vue的bootstrapTable的用法。網(wǎng)上也找不到類似的封裝示例，大部分使用vue的框架都會(huì)自己去實(shí)現(xiàn)一套自己的表格樣式。于是打算自己動(dòng)手試試，正好也可以熟悉下component的用法。
首先新建一個(gè)js文件命名為vue.bootstrapTable.js。博主直接將代碼貼出來(lái)，如果有不完善的地方，希望大家斧正。
(function ($) {
//表格初始化的默認(rèn)參數(shù)
var defaults = {
method: 'get',
toolbar: '#toolbar',
striped: true,
cache: false,
pagination: true,
};
//注冊(cè)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: '嚴(yán)厲的王老師' }
];
new Vue({
el: '#app',
data: {
tableParam: {
data: testData,
columns: [
{
field: 'Name',
title:'姓名'
}, {
field: 'Age',
title: '年齡'
}, {
field: 'Remark',
title: '備注'
}]
},
}
});
最后測(cè)試結(jié)果：
縱觀這數(shù)十行代碼，基本原來(lái)其實(shí)很簡(jiǎn)單，通過(guò)組件的props功能將實(shí)例中的初始化參數(shù)傳到組件模板里面，然后再組件加載完成之后初始化bootstrapTable，最后將bootstrapTable的實(shí)例給到組件，這樣在就可以通過(guò)Vue的實(shí)例通過(guò)子組件調(diào)用到當(dāng)前初始化的bootstrapTable對(duì)象。
2、封裝select
關(guān)于select的封裝，還是打算基于第三方組件來(lái)做。同樣的，我們新建一個(gè)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);頁(yè)面使用
$(function () {
var vm = new Vue({
el: '#app',
data: {
selectOptions:{
multiple: false,//多選
search: true,//搜索
data: [
{ text: "北京市", value: 1 },
{ text: "上海市", value: 2 },
{ text: "重慶市", value: 3 },
]
}
},
});
});
重慶分公司
重慶分公司
