props או קריאה לפונקציה בקומפננטת האב בvue

[אביי]

אני משתמש בag-grid בvue, ואני מעוניין להוסיף עמודה של כפתורי פעולות,

הדרך שמופיעה בתיעוד שלהם היא ע"י קריא לקומפוננטה של כפתורים ככה:

הגדרת העמודה בקומפננטה הראשית,

        {
          headerName: "פעולות",
          field: "actions",
          cellRenderer: 'ActionsButtonPeople',
          sortable: false,
          width: 330
        }

כמובן לאחר ייבוא של הקומפוננטה, והגדרה שלה תחת components.

import ActionsButtonPeople from "@/components/ActionsButtonPeople.vue";

הקומפננטה ActionsButtonPeople עצמה,

<template>
  <div>
    <button class="btn btn-sm btn-info mx-1" @click="blockDevice">חסימת מכשיר</button>
    <button class="btn btn-sm btn-accent mx-1" @click="openDevice">פתיחת מכשיר</button>
  </div>
</template>

<script>

export default {
  methods: {

  },
};
</script>

<style scoped>

</style>

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

אבל אני רוצה שהפונקציות openDevice וblockDevice שנקראות בלחיצה יהיו הפונקציות שבקומפוננטת האב, איך שהצלחתי להבין זה אמור להיות עם העברת props אבל לא הצלחתי לממש את זה, ואשמח לעזרה.

[systems]

יש לך דוגמא באונליין ?(כמו stackblitz codesandbox)
בעיקרון פרופס זה מאבא לבן , וemit להיפך
כהיום יש defineModel שמשלבת את שניהם (vue3.4^)
https://vuejs.org/guide/components/v-model
בהצלחה רבה

[yossiz]

@אביי דרך אחת להשיג את זה הוא שבתוך ActionsButtonPeople תעשה emit ובקומפננטה שבו מוגדרים הפונקציות openDevice ו blockDevice תאזין לאירוע ותקרא לפונקציות.
אולי זה מה ש @systems התכוון

[אביי]

@yossiz כתב בprops או קריאה לפונקציה בקומפננטת האב בvue:

שבתוך ActionsButtonPeople תעשה emit

וכיצד עושים את זה? לא הצלחתי להבין..

ניסיתי לבקש מGPT הסבר, והוא לא ממש סיפק את זה...

הוא הביא את זה לקומפננטת הילד (clb זה שם הפונקציה שתופעל באבא)

<template>
  <div>
    <button @click="emitAction('Edit')">Edit</button>
    <button @click="emitAction('Delete')">Delete</button>
  </div>
</template>

<script>
export default {
  props: {
    params: Object
  },
  methods: {
    emitAction(action) {
      // מפעילים את הפונקציה מהקומפוננטה האב
      this.params.context.componentParent.clb(action, this.params.data);
    }
  }
};
</script>

<style scoped>
button {
  margin-right: 5px;
}
</style>

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

[yossiz]

@אביי לפעמים יותר קל בלי ה"עזרה" של GTP... אפילו גוגל היה עוזר יותר

התיעוד הרשמי קצר וקל להבין
https://vuejs.org/guide/components/events.html#emitting-and-listening-to-events

ובקיצור,
בבן:

<button @click="$emit('edit', {id:rowId})">Edit</button>
<button @click="$emit('delete', {id:rowId})">Delete</button>

ובטמפלייט של הסבא איפה שאתה יוצר מופע של האבא: תיקון בפוסט זה

<Abba @edit="onRowEdit" @delete="onRowDelete"/>

בסקריפט של האבא:

onRowEdit({id}) { // edit row }
onRowDelete({id}) { // delete row }

נ.ב. לא כתבתי קוד VUE כבר תקופה יחסית ארוכה, ייתכן שטעיתי באיזה פרט

[yossiz]

אני רואה עכשיו שהתיעוד של הספרייה ממליצה לעשות על דרך מה ש-GPT הציעה
https://www.ag-grid.com/vue-data-grid/components/#child-to-parent-communication

עיין שם היטב בדוגמת הקוד

אבל זה נגד ה-best practices הרגילים של VUE. לא ככה נהוג לתקשר בין בן לאבא

[yossiz]

@yossiz כתב בprops או קריאה לפונקציה בקומפננטת האב בvue:

נ.ב. לא כתבתי קוד VUE כבר תקופה יחסית ארוכה, ייתכן שטעיתי באיזה פרט

אכן אני חלוד... התבלבלתי

תודה ל @צדיק-תמים שהעיר לי

@yossiz כתב בprops או קריאה לפונקציה בקומפננטת האב בvue:

ובטמפלייט של הסבא איפה שאתה יוצר מופע של האבא:

<Abba @edit="onRowEdit" @delete="onRowDelete"/>

זה לא נכון.
בטפמלייט של האבא איפה שיוצרים את המופע של הבן מוסיפים את המטפלים הנ"ל