الخيارات: التركيب ​

provide ​

توفر القيم التي يمكن حقنها من طرف المكونات الأبناء.

• النوع

  ts

  interface ComponentOptions {
    provide?: object | ((this: ComponentPublicInstance) => object)
  }

• التفاصيل

  provide و inject يستخدمان معًا للسماح لمكون أب أن يعمل كحاقن اعتمادية لجميع المكونات الأبناء، بغض النظر عن مدى عمق تسلسل المكونات، طالما أنها في نفس سلسلة المكون الأب.

  يجب أن يكون الخيار provide إما كائن أو دالة تعيد كائنًا. يحتوي هذا الكائن على الخاصيات المتاحة للحقن في المكونات الأبناء. يمكنك استخدام الرموز كمفاتيح في هذا الكائن.

• مثال

  استخدام أساسي:

  js

  const s = Symbol()
  
  export default {
    provide: {
      foo: 'foo',
      [s]: 'bar'
    }
  }

  استخدام دالة لتوفير حالة لكل مكون:

  js

  export default {
    data() {
      return {
        msg: 'foo'
      }
    }
    provide() {
      return {
        msg: this.msg
      }
    }
  }

  تجدر الملاحظة في المثال أعلاه، أن msg الموفرة لن تكون تفاعلية. انظر العمل مع التفاعلية لمزيد من التفاصيل.

• اطلع أيضًا على حقن/تزويد

inject ​

يصرح بالخاصيات لحقنها في المكون الحالي عن طريق تحديدها من مزودي المكونات الأباء.

• النوع

  ts

  interface ComponentOptions {
    inject?: ArrayInjectOptions | ObjectInjectOptions
  }
  
  type ArrayInjectOptions = string[]
  
  type ObjectInjectOptions = {
    [key: string | symbol]:
      | string
      | symbol
      | { from?: string | symbol; default?: any }
  }

• التفاصيل

  الخيار inject يجب أن يكون إما:

  • مصفوفة من السلاسل النصية، أو
  • كائن حيث تكون المفاتيح هي اسم الربط المحلي والقيمة إما:
    • المفتاح (سلسلة نصية أو رمز) للبحث عنه في الحقنات المتاحة، أو
    • كائن حيث:
      • خاصية from هي المفتاح (سلسلة نصية أو رمز) للبحث عنه في الحقنات المتاحة، و
      • تستخدم خاصية default كقيمة احتياطية. مماثلة للقيم الافتراضية للخاصيات، يلزم استخدام دالة منتجة لأنواع الكائن لتجنب مشاركة القيمة بين عدة نسخ من المكون.

  ستكون الخاصية المحقونة undefined إذا لم توفر خاصية مطابقة أو قيمة افتراضية.

تجدر الملاحظة أن الربط المحقون ليس تفاعليًا. هذا أمر مقصود. ومع ذلك، إذا كانت القيمة المحقونة هي كائن تفاعلي، فإن الخاصيات على هذا الكائن تظل تفاعلية. انظر العمل مع التفاعلية لمزيد من التفاصيل.

• مثال

  استخدام أساسي:

  js

  export default {
    inject: ['foo'],
    created() {
      console.log(this.foo)
    }
  }

  استخدام قيمة محقونة كقيمة افتراضية لخاصية:

  js

  const Child = {
    inject: ['foo'],
    props: {
      bar: {
        default() {
          return this.foo
        }
      }
    }
  }

  استخدام قيمة محقونة كإدخال بيانات:

  js

  const Child = {
    inject: ['foo'],
    data() {
      return {
        bar: this.foo
      }
    }
  }

  يمكن أن تكون الحقنات اختيارية مع قيمة افتراضية:

  js

  const Child = {
    inject: {
      foo: { default: 'foo' }
    }
  }

  إذا كان يحتاج إلى حقنه من خاصية باسم مختلف، استخدم from للإشارة إلى خاصية المصدر:

  js

  const Child = {
    inject: {
      foo: {
        from: 'bar',
        default: 'foo'
      }
    }
  }

  مماثلة للقيم الافتراضية للخاصيات، يجب استخدام دالة منتجة للقيم غير الأساسية:

  js

  const Child = {
    inject: {
      foo: {
        from: 'bar',
        default: () => [1, 2, 3]
      }
    }
  }

• اطلع أيضًا على حقن/تزويد

mixins ​

مصفوفة من كائنات الخيارات لتدمج في المكون الحالي.

• النوع

  ts

  interface ComponentOptions {
    mixins?: ComponentOptions[]
  }

• التفاصيل

  خيار mixins يقبل مصفوفة من المخاليط. يمكن أن تحتوي المخاليط هذه على خيارات النسخة مثل كائنات النسخة العادية، وستدمج مع الخيارات النهائية باستخدام منطق دمج الخيارات معين. على سبيل المثال، إذا كانت المخاليط تحتوي على خطاف created وكان المكون نفسه يحتوي أيضًا على خطاف created، ستستدعى كلتا الدالتين.

  تستدعى خطافات المخاليط بالترتيب الذي وفرت به، وتستدعى قبل خطافات المكون الخاصة به.

  غير موصى به بعد الآن

  في Vue 2، كانت المخاليط هي الآلية الأساسية لإنشاء شظايا قابلة لإعادة الاستخدام من منطق المكون. في حين أن المخاليط ما زالت مدعومة في Vue 3، الدوال المركبة باستخدام واجهة التركيب هي الآلية المفضلة الآن لإعادة استخدام الكود بين المكونات.

• مثال

  js

  const mixin = {
    created() {
      console.log(1)
    }
  }
  
  createApp({
    created() {
      console.log(2)
    },
    mixins: [mixin]
  })
  
  // => 1
  // => 2

extends ​

مكون "فئة أساسية" للتوريث منه.

• النوع

  ts

  interface ComponentOptions {
    extends?: ComponentOptions
  }

• التفاصيل

  يسمح لمكون واحد بالوراثة من مكون آخر، وراثة خيارات المكون الخاص به.

  من وجهة نظر ي تنفيذية، extends متطابق تقريبًا مع mixins. سيتم التعامل مع المكون المحدد بواسطة extends كما لو كان أول مخلوط.

  ومع ذلك، extends و mixins تعبران عن نوايا مختلفة. يستخدم خيار mixins أساسًا لتركيب أجزاء من الوظائف، بينما يهتم extends أساسًا بالوراثة.

  مثل mixins، ستدمج أي خيارات (باستثناء setup()) باستخدام استراتيجية الدمج المناسبة.

• مثال

  js

  const CompA = { ... }
  
  const CompB = {
    extends: CompA,
    ...
  }

  غير موصى به للواجهة التركيبية

  extends مصمم لواجهة الخيارات ولا يتعامل مع دمج خطاف setup().

في الواجهة التركيبية، النموذج الذهني المفضل لإعادة استخدام المنطق هو "التركيب" على "الوراثة". إذا كان لديك شيفرة من مكون يحتاج إلى إعادة استخدامه في مكون آخر، فكر في استخراج الشيفرة ذات الصلة إلى دوال تركيبية.

إذا كنت لا تزال تنوي "تمديد" مكون باستخدام الواجهة التركيبية، يمكنك استدعاء خطاف setup() للمكون الأساسي في خطاف setup() للمكون الممتد:

import Base from './Base.js'
export default {
 extends: Base,
 setup(props, ctx) {
   return {
     ...Base.setup(props, ctx),
     // الربط المحلي
   }
 }
}

:::