شرح تفصيلي لمعلمات وظيفة الإعداد في vue3 - الدعائم والسياق

1. دعائم المعلمة الأولى لوظيفة الإعداد

setup(props,context){}

المعلمة الأولى الدعائم:

الدعائم هي كائن يحتوي على جميع البيانات التي تم تمريرها بواسطة المكون الأصلي إلى المكون الفرعي.

استخدم الدعائم في المكونات الفرعية لتلقيها.

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

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

تحتاج إلى استخدام الدعائم لتلقي التكوين. أي الدعائم:{......}

إذا كنت لا تقبل التكوين من خلال الدعائم، فإن قيمة الإخراج غير محددة

<template>
  <ديف>
    المكون الأصلي</div>
  <لا تابع:mytitle="msg" 
      عنوان آخر = "عنوان الآخرين"
      @sonclick="sonclick">
  </no-cont>
</قالب>

<النص البرمجي>
استيراد NoCont من "../components/NoCont.vue"
التصدير الافتراضي {
  يثبت () {
    دع الرسالة={
      العنوان: "البيانات من المكون الأصلي إلى المكون الفرعي"
    }
    وظيفة سونكليك (msss: سلسلة) {
      console.log(msss)
    }
    إرجاع {رسالة، سونكليك}
  },
  عناصر:{
    لا تابع
  }
}
</script>

<قالب>
    <div @click="sonHander">
        أنا البيانات الموجودة في المكون الفرعي</div>
</قالب>

<النص البرمجي>
استيراد {defineComponent،setup} من 'vue'؛
تصدير التعريف الافتراضي للمكون ({
  الاسم: "NoCont"،
 // لا يوجد قبول // الدعائم:{
 // العنوان الخاص بي:{
 // النوع: كائن
 // }
 // },
  الإعداد (الدعائم، السياق) {
    console.log('props==>',props.mytitle);//قيمة الإخراج غير محددة
    وظيفة ابنهاندر () {
        context.emit('sonclick','تم تمرير المكون الفرعي إلى المكون الأصلي')
    }
    عودة {ابن هاندر}
  }
});
</script>

لماذا تكون القيمة الناتجة من خلال Props.mytitle غير محددة؟

لأننا لم نستخدم الدعائم لتلقي التكوين. تلك هي

الدعائم:{
    عنواني:{
        النوع: كائن
    }
}،

إذا أضفنا تكوين القبول

2. شرح سياق المعلمة

المعلمة الثانية: السياق، هو كائن.

يوجد attrs بالداخل (كائن يحصل على جميع السمات الموجودة في العلامة الحالية)،

ولكن هذه السمة هي جميع الكائنات التي لم يتم الإعلان عن استلامها في الدعائم.

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

: القيمة التي تم الحصول عليها غير محددة

ملاحظة:

الحصول على قيمة attrs لا يتطلب أي إعلان في الخاصيات لاستلامها .

يجب الإعلان عن القيمة التي تم الحصول عليها بواسطة دعائم المعلمة الأولى في الدعائم لتلقي

توزيع حدث الانبعاث (يجب استخدام هذا الحدث عند تمريره إلى المكون الأصلي)

وفتحة الفتحات

<template>
    <div @click="sonHander">
        أنا البيانات الموجودة في المكون الفرعي</div>
</قالب>

<النص البرمجي>
استيراد {defineComponent،setup} من 'vue'؛
تصدير التعريف الافتراضي للمكون ({
  الاسم: "NoCont"،
  الدعائم:{
      عنواني:{
          النوع: كائن
      }
  },
  الإعداد (الدعائم، السياق) {
    // الإخراج {العنوان: القيمة التي تم تمريرها بواسطة المكون الأصلي}
    console.log('props==>',props.mytitle);
    
    // إخراج عناوين الآخرين [استخدم السياق للحصول على القيمة، لا حاجة لاستخدام الدعائم للقبول]
    console.log('context==> ',context.attrs.othertitle);
    
    // الإخراج غير محدد، لأن السياق لا يحتاج إلى استخدام الدعائم لقبوله.
    console.log('contextmytitle==> ',context.attrs.mytitle);
    وظيفة ابنهاندر () {
        context.emit('sonclick','تم تمرير المكون الفرعي إلى المكون الأصلي')
    }
    عودة {ابن هاندر}
  }
});
</script>

3. يرسل المكون الفرعي الأحداث إلى المكون الأصلي

<قالب>
    <div @click="sonHander">
        أنا البيانات الموجودة في المكون الفرعي</div>
</قالب>

<النص البرمجي>
استيراد {defineComponent،setup} من 'vue'؛
تصدير التعريف الافتراضي للمكون ({
  الاسم: "NoCont"،
  الدعائم:{
      عنواني:{
          النوع: كائن
      }
  },
  الإعداد (الدعائم، السياق) {
    وظيفة ابنهاندر () {
        context.emit('sonclick','تم تمرير المكون الفرعي إلى المكون الأصلي')
    }
    عودة {ابن هاندر}
  }
});
</script>

4. تحسين إرسال الأحداث،

نحن نعلم أن سياق المعلمة الثانية هو كائن

، والكائن له ثلاث سمات، وفتحات، وإصدار.

عند إرسال الأحداث، لا بأس في استخدام الإرسال مباشرة

<template>
    <div @click="sonHander">
        أنا البيانات الموجودة في المكون الفرعي</div>
</قالب>

<النص البرمجي>
استيراد {defineComponent،setup} من 'vue'؛
تصدير التعريف الافتراضي للمكون ({
  الاسم: "NoCont"،
  الدعائم:{
      عنواني:{
          النوع: كائن
      }
  },
  الإعداد (الدعائم، {attrs، فتحات، تنبعث}) {
    // استخدم الإرسال مباشرة لوظيفة إرسال الحدث sonHander(){
        تنبعث ("sonclick"، "يتم تمرير المكون الفرعي إلى المكون الأصلي")
    }
    عودة {ابن هاندر}
  }
});
</script>

5. احصل على القيمة التي تم تمريرها بواسطة المكون الأصلي،

وسنستخدم المعلمةprops للحصول على القيمة

وattrs للحصول على القيمة

<template>
<ساعة/>
   <h2>المكون الفرعي</h2>
    <div @click="sonHander">
        أنا البيانات الموجودة في المكون الفرعي</div>
    <h2>استخدم بيان الدعائم لتلقي ==>{{ mytitle }}</h2> 
    <h2>استخدم المعلمة attrs للحصول على ==>{{ attrs.othertitle }}</h2> 
</قالب>

<النص البرمجي>
استيراد {defineComponent،setup} من 'vue'؛
تصدير التعريف الافتراضي للمكون ({
  الاسم: "NoCont"،
  الدعائم:{
      عنواني:{
          النوع: كائن
      }
  },
  الإعداد (الدعائم، {attrs، فتحات، تنبعث}) {
    وظيفة ابنهاندر () {
        تنبعث ("sonclick"، "يتم تمرير المكون الفرعي إلى المكون الأصلي")
    }
    العودة {سونهاندير، attrs}
  }
});
</script>

مرفق عدة نقاط يجب ملاحظتها عند استخدام وظيفة الإعداد:

• توقيت تنفيذ وظيفة الإعداد بين beforeCreate وcreate
• . نظرًا لأن توقيت تنفيذ الإعداد يقع بين الإنشاء، فقد تم إنشاء المكون للتو، ولم تتم تهيئة البيانات والأساليب ومع ذلك، لا يمكن استخدام البيانات والأساليب في الإعداد.
• يشير هذا في الإعداد إلى أن
• الإعداد غير محدد يمكن أن يكون متزامنًا فقط، وليس غير متزامن.

ما سبق هو شرح مفصل لمعلمات وظيفة الإعداد في vue3 - الدعائم والسياق المعلومات، يرجى الانتباه إلى المقالات الأخرى ذات الصلة على موقع PHP الصيني!