vue components, frame for childs components

[chagold]

אני רוצה לעשות קומפוננט שיהוה מסגרת, ויציג בפנים קומפוננטים אחרים (שישלחו כפרמטרים בקריאה לקומפוננט).

(הצורך לזה הוא לדוגמא כשיש שדה של 'לקוח', וצריך לעשות 'איתור לקוח', או שדה של 'תאריך' וכמו"כ צריך לפתוח תיבה לבורר תאריכים, ושהוא יסגר כשאני גומר את האיתור ובוחר.
אני יכול להשתמש בתיבות פופאפ לכל דבר ויש לזה כבר קומפוננטים מוכנים אבל זה לא טוב לחווית משתמש).

בשביל לשלוח נתונים לקומפוננט יש את props. אבל לא הצלחתי להכניס לprops קומפוננט ילד.

דוגמא מינימלית:

קומפוננט האב

<template>
    <div>
        {{component_child}}
    </div>
</template>


<script>
    export default {
        props:['component_child'],
	};
</script>

וכדי לשלוח אליו נתונים אמורים לקרוא לו איךשהוא ככה:

<component :component_child="component_child"></component>

השאלה איך לשלוח אליו קומפוננטים.
אם מישהו יכול להכווין אותי בבקשה במראה מקום או עזרה איך לקדם את זה.תודה רבה

[מוטי אורן]

@chagold לא לגמרי הבנתי מה הצורך, אבל לפי מה שהבנתי נראה לי ש slots יכול לעזור לך לממש את מה שאתה צריך.
תנסה לראות כאן https://vuejs.org/guide/components/slots.html

[חוקר]

אם הבנתי נכון את כוונתך, אני חושב שאין מנוס מלייבא מראש את הקומפוננטות שיכולות לבוא לשימוש בכל התרחישים, לייבא אותם לקומפוננט שם יוצגו
ותעשה תנאים מתי להציג כל קומפוננטה, שעל זה תוכל כבר לעביר props של משתנים או אובייקטים

[רפאל]

פוסט זה נמחק!

[davidnead]

אם הבנתי נכון את צרכיך, התשובה לשאלותיך זה התחביר הבא:

<componnet :is="componnetName"></componnet>

המילה componnet כאן אינה דוגמה, אלא מילה שמורה.
זה קומפוננט דינמי, ששותלים פעם אחת ומעבירים אליו עם הפרופ הייחודי is את שם הקופוננט שהוא אמור להציג.
רק לשים לב שאתה לא פטור מלייבא את הקופמוננט.
זה בעצם מקביל ללעשות:

<child1 v-if="componnetName=='child1'"></child1>

<child2 v-else-if="componnetName=='child2'"></child2>

<child3 v-else-if="componnetName=='child3'"></child3>

<child4 v-else-if="componnetName=='child4'"></child4>

[davidnead]

@מוטי-אורן אמר בvue components, frame for childs components:

@chagold לא לגמרי הבנתי מה הצורך, אבל לפי מה שהבנתי נראה לי ש slots יכול לעזור לך לממש את מה שאתה צריך.
תנסה לראות כאן https://vuejs.org/guide/components/slots.html

בניסיון לקרוא את השאלה שלך שוב, נראה שהפתרון הזה יותר מתאים לך. הוא מעניק לך יותר גמישות ושליטה יותר ישירה מקומפוננט האב/סבא.

[רפאל]

@davidnead אמר בvue components, frame for childs components:

רק לשים לב שאתה לא פטור מלייבא את הקופמוננט:

@davidnead איך זה היה אמור לעזור לשואל השאלה?? קראת את השאלה שלו??

למען האמת ניתן להימנע מיבוא כולל של הקומפוננטות מראש באמצעות השימוש בAsyncComponent העושה שימוש בDynamic Import כבדוגמא דלהלן (דוגמא זו מניחה שכל הקומפוננטות שישלחו נמצאות תחת מיקום אחד, ולכן לדעתי אינה מהווה פתרון עבור שואל השאלה):

<template>
  <component :is="component"></component>
</template>

<script>
import { defineAsyncComponent } from "vue";

export default {
  props: {
    componentName: {
      type: String,
      default: () => "DefaultComponent",
    }
  },
  computed: {
    component() {
      return defineAsyncComponent(() => import(`./${this.componentName}.vue`));
    }
  }
};
</script>

[davidnead]

@רפאל אמר בvue components, frame for childs components:

@davidnead אמר בvue components, frame for childs components:

אם הבנתי נכון את צרכיך, התשובה לשאלותיך זה התחביר הבא:

@davidnead איך זה היה אמור לעזור לשואל השאלה?? קראת את השאלה שלו??

הוא רוצה להעביר קומפוננט בפרופ. זו הדרך, במקום להעביר את הקומפוננט, מעבירים את השם שלו.
אמנם, מתוך מטרת השאלה, נראה שהצורך האמיתי שלו הוא לא להעביר את הקומפוננט, השאלה לא מספיק בהירה, אך נראה שהוא רוצה יותר גמישות שתפטור אותו מלייבא מה שהוא לא צריך, או לפחות תאפשר לו לשלוח נתונים יותר בקלות לפי הצורך. ולכן כתבתי שאם כן הפתרון הוא SLOT.
לא מכיר את הפרוייקט, התשובה הפשוטה למה שהוא שאל - זו התשובה הראשונה שלי.

[רפאל]

@davidnead שואל השאלה זקוק לפתרון להצגת קומפוננטות בצורה דינמית (לא State Machine). איך הפתרון שלך עוזר?

[davidnead]

@רפאל התשובה שלי ענתה על ההצגת קומפוננט דינמית, אך מותנת בייבוא מראש.
השאלה איזו רמה של דינמיות רוצים להגיע. אני רואה שערכת את התשובה הקודמת שלך, והוספת שם את אותו פתרון, רק חסכת את הייבוא. במה שאני נתתי הוא צריך לייבא מראש את כל התרחישים, ורק - כמו שהסברתי - הוא חוסך ומשתמש בתחביר אלגנטי.
זה מתאים למקרה שהוא צופה 4-5 קומפוננטות אפשריות, לא יותר.
השינוי שלך אכן חוסך לו את הייבוא, ומאפשר גם לייבא דינמית כל קומפוננטה, וגם את זה סייגת בתנאי שאינם באותו מיקום. גם על זה אפשר להוסיף שהוא יכול לשלוח את המיקום עם הפרופ. שוב, השאלה מה הצרכים שלו. לא תמיד גמישות אינסופית היא טובה, וברוב המקרים אין צורך להגיע עד לשם.

אם הוא באמת צריך גמישות רבה למגוון תרחישים (כמו שכנראה אתה הנחת) הפתרון היותר סביר הוא כנראה SLOT. ושוב, הכל מתוך ניחוש מה הצרכים שלו.

[רפאל]

@davidnead יבוא מראש זה בדיוק ההגדרה לאי-דינמיות, באותה מידה אפשר ליצור <Dictionary<Key, Component ולהחליט על מפתח שרירותי שיועבר בין הקומפוננטות.

@davidnead אמר

אני רואה שערכת את התשובה הקודמת שלך, והוספת שם את אותו פתרון

לא צרפתי את זה בתור פתרון (כפי שכתבתי) כי זה לא. רק שללתי את הצורך ביבוא מראש של קומפננטות שספק אם יוצגו למשתמש בעתיד.

[davidnead]

@רפאל אמר בvue components, frame for childs components:

@davidnead יבוא מראש זה בדיוק ההגדרה לאי-דינמיות, באותה מידה אפשר ליצור <Dictionary<Key, Component ולהחליט על מפתח שרירותי שיועבר בין הקומפוננטות.

עושה רושם שלא קראת את מה שאני כתבתי. נראה לי שהויכוח הזה מיותר.

[רפאל]

פוסט זה נמחק!

[רפאל]

פוסט זה נמחק!

[davidnead]

@רפאל אמר בvue components, frame for childs components:

עלול להוות דיס-אינפורמציה.

זו האשמה עוד יותר חריפה. ברוסיה יושבים עליה כיום 15 שנים בכלא.