歡迎加入QQ討論群258996829
麥子學(xué)院 頭像
蘋果6袋
6
麥子學(xué)院

Vue.js可復(fù)用性與組合詳解

發(fā)布時間：2018-04-22 22:09  回復(fù):0  查看:3456   最后回復(fù)：2018-04-22 22:09  
Vue.js是web 前端開發(fā)中非常重要的框架之一，本文和大家分享的是Vue.js可復(fù)用性和組合相關(guān)內(nèi)容，希望對大家 學(xué)習(xí)前端知識有所幫助。   
　　在實際的應(yīng)用中，有很多的業(yè)務(wù)代碼是可以重復(fù)使用的，vue.js 本身是一個注重于高效率的框架，所以也提供了組件中的復(fù)用功能?；烊?nbsp; (mixins)  是一種分發(fā)  Vue 組件中可復(fù)用功能的非常靈活的方式。混入對象可以包含任意組件選項。當(dāng)組件使用混入對象時，所有混入對象的選項將被混入該組件本身的選項。如下：
　　//  定義一個混入對象 var mixinTest = {
　　created:  function () {
　　 this.mixinMethod()
　　},
　　methods: {
　　mixinMethod:  function () {
　　console.log('mixinMethod from mixin!')
　　}
　　}
　　}
　　//  定義一個使用混入對象的組件 var Component = Vue.extend({
　　mixins: [mixinMethod]
　　})
　　 var component =  new Component() // => "hello from mixin!"
　　 組件和混入對象含有同名選項時
　　從中可以發(fā)現(xiàn)當(dāng)組件混入對象時，對象的方法以及鉤子都被混入了該組件的本身。這種方式是很靈活的。那要是組件和混入對象含有同名選項時，也是有規(guī)則的，比如，當(dāng)數(shù)據(jù)上和組件有同名時，以組件的數(shù)據(jù)為先。
　　var mixin = {
　　data:  function () {
　　 return {
　　testA: 'aaaa',
　　testB: 'bbbb'
　　}
　　}
　　}
　　 new Vue({
　　mixins: [mixin],
　　data:  function () {
　　 return {
　　testA: 'AAAA',
　　testC: 'CCCC'
　　}
　　},
　　created:  function () {
　　console.log(this.$data)
　　// => { testA: "AAAA", testB: "bbbb", testC: "CCCC" }
　　}
　　})
　　mixins 對象里的 testA 和 testB 混入到了組件中的 data 中，同時出現(xiàn)了 testA 與組件同名，所以優(yōu)先保留了組件的數(shù)據(jù)。
　　 混入對象與組件具有同名鉤子函數(shù)時
　　 var mixin = {
　　created:  function () {
　　console.log(' 混入對象的鉤子 ')
　　}
　　}
　　 new Vue({
　　mixins: [mixin],
　　created:  function () {
　　console.log(' 組件的鉤子 ')
　　}
　　})
　　// => " 混入對象的鉤子 "http:// => " 組件的鉤子 "
　　可以發(fā)現(xiàn)混入對象的鉤子和組件的鉤子都會執(zhí)行，但是會先執(zhí)行混入對象的鉤子
　　 值為對象的選項時，例如：methods，components等的時候
　　var mixin = {
　　methods: {
　　mixinsMethod:  function () {
　　console.log('mixinsMethod')
　　},
　　sameMethod:  function () {
　　console.log('from mixin')
　　}
　　}
　　}
　　var  vm =  new Vue({
　　mixins: [mixin],
　　methods: {
　　selfMethod:  function () {
　　console.log('selfMethod')
　　},
　　sameMethod:  function () {
　　console.log('from self')
　　}
　　}
　　})
vm.mixinsMethod() // => "mixinsMethod"
vm.selfMethod() // => "selfMethod"
vm.sameMethod() // => "from self"
　　由上可得，在值為對象的混入對象混入時，這些將和組件原有的選項混合一起成為一個對象，當(dāng)對象的鍵名與組件的鍵名出現(xiàn)重復(fù)時，會使用組件的鍵名。
　　 全局混入
　　以上列舉的都是單獨的引入到某一個組件中使用。也可以全局注冊混入對象。這樣的話所有的實例就都會被混入的對象所作用。也可以根據(jù)自己需要做成一個具體的使用工具類。供全局所有的實例使用。不過也要小心使用，畢竟會影響到所有的組件，需要結(jié)合實際場景使用。
　　Vue.mixin({
　　created:  function () {
　　 var option =  this.$options.text
　　 if (option) {
　　console.log(option)
　　}
　　}
　　}) new Vue({
　　text: 'globalMixins!'
　　})// => "globalMixins!"
來源：網(wǎng)絡(luò)
您還未登錄，請先登錄

熱門帖子

最新帖子

?