Vueでコンポーネントをより多重化する方法

前言
ほとんどのフロントエンドフレームワークはコンポーネント化の能力を提供しており、日常開発では、コンポーネントで自分のビジネスロジックをカプセル化することがよくあります.では、多重化率の高いコンポーネントをどのように書くかが重要なテクニックになります.ここでは、Vueを使用する場合のいくつかの多重化コンポーネントの方法をまとめます.
シーン
フォーム検証は、フォーム内の異なるコンポーネントが常に同じ検証ロジックを必要とするシーンです.たとえば、検証値が空でない場合は、このシーンに従っていくつかの例を挙げます.
Mixinの使用
Vueは多重化の効果を達成するために「混入」というスキームを提供しているので、フォーム検証に関連するmixinを書き、各コンポーネントに混入することができます.

// validate-mixin.js
const validateMixin = {
    props: {
        required: {
            type: Boolean,
            default: false
        }
    },
    methods: {
        validate(value) {
            if (this.required && (value === undefined || value === null || value === '')) {
                this.isError = true;
            } else {
                this.isError = false;
            }
        }
    }
};
export default validateMixin

テキスト入力ボックスとデジタル入力ボックスの2つのコンポーネントがあります

// input.js



import validateMixin from '@/common/mixin/validate-mixin.js'

export default {
    name: 'KaInput',
    mixins: [validateMixin],
    methods: {
        onInput(e) {
            this.validate(e.target.value);
        }
    },
    data() {
        return {
            isError: false,
            errMsg: '    '
        };
    }
};

// number-input.js



import validateMixin from '@/common/mixin/validate-mixin.js'

export default {
    name: 'KaNumberInput',
    mixins: [validateMixin],
    methods: {
        onInput(e) {
            this.validate(e.target.value);
        }
    },
    data() {
        return {
            isError: false,
            errMsg: '    '
        };
    }
};

混入の利点は,単純な使用で共通の属性や方法をこのmixinオブジェクトにカプセル化し,他の属性や方法を共有する必要があるコンポーネントはこのmixinを導入すればよいということである.しかし,上記のコードから,いくつかの明らかな欠点が混入していることが分かる.

テンプレートの内容は各コンポーネントに維持され、多重化されない必要がある.

属性と方法はmixinに置かれており、後期は他人のメンテナンスに不便であり、ソースコンポーネントと混入オブジェクトの間の論理を手動で整理する必要がある.

mixinsはプロパティの競合を引き起こし、同じ名前のライフサイクルが統合され、冗長な論理をもたらす可能性があります.mixinの侵入性が強いこともわかります.

実際に開発の過程で、mixinのディレクトリ構造をどのように組織するかも問題であり、ページレベルのmixinなのか、一部のページのmixinなのか、さらには全局のmixinなのかを区別するには、後期のmixinの機能が混乱し、コードのメンテナンスに不利であることがはっきりしない.
RenderLess
renderLessはコンテンツをレンダリングしないコンポーネントを意味し、Vueではスロットを使用して実現することができ、ReactのHOCとは異曲同工の妙がある.

// validate-render-less.vue


export default {
    data: () => {
        return {
            isError: false,
            errMsg: 'can not be null'
        };
    },
    props: {
        required: {
            type: Boolean,
            required: false
        }
    },
    methods: {
        validate(e) {
            const value = e.target.value;
            if (
                this.required &&
                (value === undefined || value === null || value === '')
            ) {
                this.isError = true;
            } else {
                this.isError = false;
            }
        }
    }
};

上記のモジュールは本質的にvueコンポーネントであり、テンプレートがあり、論理的であり、スロットを利用してテンプレートに「プレースホルダ」を予約し、他のコンポーネントはここに自分のコンテンツを追加することができます.

// input.js



import validate from '@/common/render-less/validate.vue';

const kaInput = {
    props: {
        required: {
            type: Boolean
        }
    },
    name: 'ka-input',
    components: {
        'r-l-validate': validate
    }
};

export default kaInput;

// number-input.js



import validate from '@/common/render-less/validate.vue'

export default {
    name: 'KaNumberInput',
    props: {
        required: {
            type: Boolean,
            required: false
        }
    },
    components: {
        'r-l-validate': validate
    }
};

render-lessコンポーネントを使用すると、いくつかの利点があります.

はテンプレートの論理を多重化することができ、共通の部分はrenderlessの

に抽出することができる.

ネーミング競合は発生しません

簡単にまとめる
簡単なシーンではmixinは大部分の問題を解決することができますが、彼のいくつかの欠点に注意してください.他のシーンでは、テンプレートを多重化する必要があり、コンポーネントの論理が複雑な場合は、render-lessコンポーネントの使用を優先する必要があります.