フロントエンド開発フレームワークの普及に伴い、パフォーマンスとコードの冗長性に対するさまざまなソリューションが存在します。その中でも、再利用は中心的な手法であり、広く使用されています。プロジェクト開発では、共通のリソースがよく使用されます。コンポーネントやデータの一部は、抽出してコンポーネント化します。
Vue ではミックスイン データ ミキシングも提供しています。本質的には、データの一部またはフック、メソッドなどを抽出し、必要なコンポーネント ページ内で直接ミキシングすることです。このとき、現在のコンポーネントにはミキシング機能があります。
一般的な例を作成し、 mixin フォルダーにxxx.js
mixinを作成します。
export const myMixins = {
data() {
return {
} //可以混入重复的数据
},
inject: ['Id'], //vue提供的另外一种数据传递方式，用于父组件向子孙组件传递数据，某些组件嵌套链中都会用到的属性
computed: {
regionId() {
return this.Id() //获取id
}
},
watch: {
Id: {
handler: function() {
this.getData && this.getData() //只要全局的某个属性变化，那么就自动执行一次更新数据的函数
},
immediate: true //首次进入立即执行一次
}
}
}
Inject、provide、injectはペアで登場します（詳しくは別記事に書きます）
機能：親コンポーネントが子孫コンポーネントにデータを渡すために使用します
使い方：provideは親コンポーネントの下位に渡すデータを返します、このデータを使用する子コンポーネントや孫コンポーネントなどのサブコンポーネントにデータを注入します。
使用シナリオ: vue には $parent プロパティがあるため、子コンポーネントは親コンポーネントにアクセスできます。ただし、孫コンポーネントが祖先コンポーネントにアクセスすることはより困難です。親コンポーネント データへのクロスレベル アクセスは、provide/inject を通じて簡単に実現できます。
コンポーネント内:
import {
myMixins } from '../mixins/xxx'
export default {
mixins: [ myMixins ],
data() {
return {
}
}
methods: {
getData() {
//统一对外暴露为getData，这样，mixin就可以统一触发了
this.xxx()
},
async xxx(){
} //更新数据的方法
}