随着深入vue的学习和使用，在文档中使用mixin来减少代码的复用可是非常省心的呢。混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项（vue生命周期，methods，computed，watch）。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项，实现了一处代码多出复用的功能。
下面来看看基本使用方法吧~
- 最初のページ番号、ページ番号データ項目、プロパティの合計数を有する、ページャにおけるSrc /共通/ JS / mixin.js Aミックスインで定義されています。データの他にも、計算小道具、8サイクル宣言フック、メソッドオブジェクトを定義するオブジェクトを見ることができます。
export const pageNationMixin = {
data() {
return {
page: 1,
limit: 10,
total: 100
}
},
created() {
this.getTableData()
},
methods: {
getTableData() {
console.log(this.page)
// 异步获取表格数据代码
}
}
}
使用法を導入し、そのtable.vueそこpageNationMixinをデータ、作成した、方法table.vueで宣言されています。
import pageNationMixin from '@/common/js/mixin'
export default {
mixins: [pageNationMixin]
}
- データは内部で合成ミックスイン再帰的に定義され、そして優先成分データに矛盾がある場合にオブジェクト場合。
var mixin = {
data() {
return {
message: 'hello',
foo: 'abc'
}
}
}
export default {
mixins: [mixin],
data: function () {
return {
message: 'goodbye',
bar: 'def'
}
},
created: function () {
console.log(this.$data)
// => { message: "goodbye", foo: "abc", bar: "def" } // mixin中message被组件中的message覆盖。其余数据合并。
}
}
- 同じ名前のフック関数は、配列にマージされますので、呼び出されます。また、混合したオブジェクトフックは、コンポーネント自体のフックの前に呼び出されます。同時にフック関数が作成されるとき、例えば、次にアセンブリ実行作成さミックスインのミックスインを使用して第1のコンポーネントを行います。
- 目標値オプションこのような方法、構成要素およびディレクティブは、単一のオブジェクトにマージされます。ときに、2つのオブジェクトキーの競合、に重要なコンポーネントオブジェクトを取ります。
頻繁に使用されるシーンをミックスインして、何をしますか？
- 共通のページャ。
SRC /共通/ JS / mixin.jsはページャミックスインを定義した：成分はフィニッシャ複数のアプリケーションを持っているように、以下pageNationMixinは、コードを再利用することができます。
export const pageNationMixin = {
data() {
return {
page: 1,
limit: 10,
total: 0
}
},
created() {
this.getTableData(1, 10)
},
methods: {
getTableData(current, size) {
const params = {
page: current,
limit: size
}
axios.get(url, { params }).then((res) => {
this.total = res.data.total
})
},
onShowSizeChange(current, size) {
this.page = current
this.limit = size
this.getTableData(current, size)
},
}
}
アプリケーションコンポーネントとに導入する必要があります。ページ番号またはページデータの変更は、ミックスイン関数と呼ばれたとき。これにより、一つの大きな塊を省略。
<template>
<div>
<a-pagination
showSizeChanger
@showSizeChange="onShowSizeChange" // 每页数据改变
@change="onShowSizeChange" // 当前页改变
:total="total"
/>
</div>
</template>
<script>
import pageNationMixin from '@/common/js/mixin' // 需要将pageNationMixin 引入
export default {
mixins: [pageNationMixin]
};
</script>
- 以上2つのコンポーネントが同じデータやメソッドを持っています。
以上の2つの成分は一般的な方法と機能的に類似する場合、それは抽象コード多重と考えることができます。例の、例えばonShowSizeChange方法。
混合（ミックスイン）上のアプリケーションが一時的にここに結論付けました。後で、より良いシナリオを見つけた場合、〜まで追加していきます
https://github.com/Gesj-yean/vue-demo-collection文書の使用より優れたプラグイン。学生はどうもありがとうございましたことができ、私の一番上のブログを見て時間を持っています。
