vueでミックスインを使用する方法

最も基本的な使用法である公式ウェブサイトとインターネット上のいくつかの情報を参照してください

Mixinは、Vue
コンポーネントで再利用可能な機能を配布するための非常に柔軟な方法を提供します。ミックスインオブジェクトには、任意のコンポーネントオプションを含めることができます。コンポーネントが混合オブジェクトを使用する場合、混合オブジェクトのすべてのオプションがコンポーネント自体のオプションに「混合」されます。
ミックスインは、パブリックメソッドまたは計算されたプロパティの一部を定義し、それらをさまざまなコンポーネントにミックスして使用します。これらのコンポーネントは、簡単に管理し、均一に変更できます。

common.jsファイル

export const mixin = {
    
    
	data() {
    
    
		return {
    
    
			num: 1
		}
	},
	methods: {
    
    
		fangfa() {
    
    
			console.log('vue中mixins的使用方法')
		}
	}
}

vueファイル

<script>
import {
    
     mixin } from '../../common/common' //common.js的路径

export default {
    
    
	mixins: [mixin],
	mounted() {
    
    
		this.fangfa()
		console.log('num',this.num)
	}
}
</script>

実行

コンポーネントとミックスインオブジェクトに同じ名前のオプションが含まれている場合、これらのオプションは適切な方法で「マージ」されます。
たとえば、
データオブジェクトは内部で再帰的にマージされ、競合が発生すると、コンポーネントデータ
が優先されます。同じ名前のフック関数が配列にマージされるため、すべてが呼び出されます。さらに、混合オブジェクトのフックは、コンポーネント自体のフックの前に呼び出されます。
メソッド、コンポーネント、ディレクティブなどの値がオブジェクトであるオプションは、同じオブジェクトに結合されます。2つのオブジェクトのキー名が競合する場合は、コンポーネントオブジェクトのキーと値のペアを取得します。