Vue中Mixin的用法

混入 (mixin) 提供了一種非常靈活的方式，來分發 vue 元件中的可復用功能。乙個混入物件可以包含任意元件選項。當元件使用混入物件時，所有混入物件的選項將被「混合」進入該元件本身的選項。

// 定義乙個混入物件
var mymixin =
, methods:}}
// 定義乙個使用混入物件的元件
var component = vue.
extend()
var component =
newcomponent()
// => "hello from mixin!"

當元件和混入物件含有同名選項時，這些選項將以恰當的方式進行「合併」。

比如，資料物件在內部會進行遞迴合併，並在發生衝突時以元件資料優先。

var mixin =}}
newvue(}
, created:
function()
}})

同名鉤子函式將合併為乙個陣列，因此都將被呼叫。另外，混入物件的鉤子將在元件自身鉤子之前呼叫。

var mixin =
}new
vue(})
// => "混入物件的鉤子被呼叫"
// => "元件鉤子被呼叫"

值為物件的選項，例如 methods、components 和 directives，將被合併為同乙個物件。兩個物件鍵名衝突時，取元件物件的鍵值對。

var mixin =
, conflicting:
function()
}}var vm =
newvue(,
conflicting:
function()
}})vm.
foo(
)// => "foo"
vm.bar()
// => "bar"
vm.conflicting()
// => "from self"

注意：vue.extend() 也使用同樣的策略進行合併。

混入也可以進行全域性註冊。使用時格外小心！一旦使用全域性混入，它將影響每乙個之後建立的 vue 例項。使用恰當時，這可以用來為自定義選項注入處理邏輯。

// 為自定義的選項 'myoption' 注入乙個處理器。
vue.
mixin(}
})newvue()
// => "hello!"

自定義選項將使用預設策略，即簡單地覆蓋已有值。如果想讓自定義選項以自定義邏輯合併，可以向 vue.config.optionmergestrategies 新增乙個函式：

vue.config.optionmergestrategies.
myoption
=function
(toval, fromval)

對於多數值為物件的選項，可以使用與 methods 相同的合併策略：

var strategies = vue.config.optionmergestrategies
strategies.myoption = strategies.methods

可以在 vuex 1.x 的混入策略裡找到乙個更高階的例子：

const merge = vue.config.optionmergestrategies.computed
vue.config.optionmergestrategies.
vuex
=function
(toval, fromval)
}

Vue中mixin的用法詳解

mixin 混入，提供了一種非常靈活的方式，來開發vue元件中的可復用功能。乙個混入物件可以包含任意元件選項。當元件使用混入物件時，所有混入物件的選項將被混合進入該元件本身的選項。引用例子區域性混入目錄結構檔案 export default created function methods...

Vue中的Mixin理解

當有不同元件的選項存在相同處理時，vue為我們提供了一種叫做mixin的混入功能。它通過遞迴操作，將mixin物件上的選項與元件中的選項合併，避免了元件間相同處理的冗餘。下面，我在專案中建立了乙個叫做comment的元件，然後將此元件作為另乙個元件mixin選項後，新元件就完全複製了comment...

Sass Less中mixin的用法

1.布局 flex布局復用 mixin flex hov space between,col center after偽類加小圖示 mixin bgimg w 0,h 0,img size contain 固定定位,相容ie6 mixin fixed 水平豎直方向居中 translate mixin...

Vue中Mixin的用法

Vue中mixin的用法詳解

Vue中的Mixin理解

Sass Less中mixin的用法

相關推薦