Bolehkah prop melepasi fungsi dalam vue?

Props dalam Vue boleh menghantar fungsi; rentetan, tatasusunan, nombor dan objek boleh dihantar sebagai prop dalam Vue terutamanya digunakan untuk menghantar nilai dalam komponen bahagian luar. Sintaks ialah " export default {methods: {myFunction() {// ...}}};".

Persekitaran pengendalian tutorial ini: sistem Windows 10, versi Vue3, komputer Dell G3.

Fungsi pemindahan prop dalam vue

Soalan biasa yang sering ditanya oleh pemula dalam Vue. Rentetan, tatasusunan, nombor dan objek boleh dihantar sebagai props. Tetapi bolehkah anda menghantar fungsi sebagai props? Sebaliknya, Vue mempunyai ciri yang direka khusus untuk menyelesaikan masalah ini, mari kita lihat seterusnya.

propsMelalukan fungsi ke dalam komponen

Mendapatkan fungsi atau kaedah dan menghantarnya sebagai prop kepada komponen kanak-kanak agak mudah. Malah, ia berfungsi dengan cara yang sama seperti melepasi mana-mana pembolehubah lain:

Seperti yang dinyatakan sebelum ini, anda tidak boleh melakukan apa-apa seperti ini dalam Vue.

<template>
  <ChildComponent :function="myFunction" />
</template>

export default {
  methods: {
    myFunction() {
      // ...
    }
  }
};

Kenapa? Vue mempunyai sesuatu yang lebih baik.

React vs Vue

Jika anda telah menggunakan React, anda akan digunakan untuk menghantar fungsi.

Dalam React, kita boleh menghantar fungsi daripada komponen induk kepada komponen anak supaya komponen anak boleh berkomunikasi ke atas dengan komponen induk. Props dan data mengalir ke bawah, panggilan fungsi mengalir ke atas.

Walau bagaimanapun, Vue mempunyai mekanisme berbeza untuk komunikasi anak-ke-ibu bapa, Vue menggunakan acara.

Ini adalah cara yang sama DOM berfungsi - cara Vue lebih konsisten dengan penyemak imbas daripada React. Elemen boleh mengeluarkan peristiwa dan boleh mendengar peristiwa ini.

Oleh itu, walaupun ada kemungkinan untuk menghantar fungsi sebagai prop dalam Vue, ia dianggap sebagai anti-corak.

Menggunakan Acara

Acara ialah cara kita berkomunikasi dengan komponen induk dalam Vue.

Berikut ialah contoh ringkas tentang cara acara berfungsi.

Pertama, kami akan mencipta komponen kanak-kanak, yang mengeluarkan acara apabila dicipta:

Dalam komponen induk, kami mendengar acara:

// ChildComponent
export default {
  created() {
    this.$emit('created');
  }
}

Terdapat banyak lagi yang boleh anda lakukan dengan acara, dan itu hanya menconteng permukaan. Adalah sangat disyorkan untuk menyemak dokumentasi rasmi Vue untuk mengetahui lebih lanjut mengenainya, ia pasti bernilai membaca.

<template>
  <ChildComponent @created="handleCreate" />
</template>

export default {
  methods: {
    handleCreate() {
      console.log(&#39;Child has been created.&#39;);
    }
  }
};

Tetapi peristiwa tidak dapat menyelesaikan semua masalah kita sepenuhnya.

Mengakses data dalam skop komponen induk daripada komponen anak

Dalam banyak kes, masalah yang kami cuba selesaikan ialah mengakses data daripada skop yang berbeza.

Komponen induk mempunyai satu skop, dan komponen anak mempunyai skop lain.

Secara amnya, kami mahu mengakses nilai dalam komponen anak daripada komponen induk, atau daripada komponen anak kepada nilai dalam komponen induk. Vue menghalang kami daripada melakukan perkara ini secara langsung, yang merupakan perkara yang baik.

Ia menjadikan komponen kami lebih terkapsul dan meningkatkan kebolehgunaan semulanya. Ini menjadikan kod kami lebih bersih dan mengelakkan banyak sakit kepala dalam jangka masa panjang.

Tetapi kadangkala kita mungkin cuba mengatasi masalah ini melalui fungsi.

"Dapatkan nilai daripada kelas induk"

Jika anda mahu komponen anak mengakses kaedah komponen induk, kemudian luluskan kaedah secara terus sebagai prop nampak ringkas dan mudah.

Dalam komponen induk kita akan melakukan ini:

Dalam komponen anak kita, gunakan kaedah lulus dalam:

<!-- Parent -->
<template>
  <ChildComponent :method="parentMethod" />
</template>

// Parent
export default {
  methods: {
    parentMethod() {
      // ...
    }
  }
}

Melakukan ini akan Apa masalahnya ?

// Child
export default {
  props: {
    method: { type: Function },
  },
  mounted() {
    // Use the parent function directly here
    this.method();
  }
}

Ini tidak salah sepenuhnya, tetapi adalah lebih baik untuk menggunakan acara dalam kes ini.

Kemudian, apabila diperlukan, komponen kanak-kanak tidak memanggil fungsi, tetapi hanya memancarkan peristiwa. Komponen induk kemudian akan menerima acara, memanggil fungsi dan pemasangan akan mengemas kini prop yang dihantar kepada komponen anak.

Ini adalah cara yang lebih baik untuk mencapai kesan yang sama.

Dalam kes lain, kami mungkin mahu mendapatkan nilai daripada elemen anak ke dalam elemen induk dan kami menggunakan fungsi untuk ini.

Sebagai contoh, anda mungkin melakukan ini. Fungsi induk menerima nilai fungsi anak dan memprosesnya:

Panggil kaedah yang diluluskan dalam komponen anak dan lulus nilai komponen anak sebagai parameter kaedah:

<!-- Parent -->
<template>
  <ChildComponent :method="parentMethod" />
</template>

// Parent
export default {
  methods: {
    parentMethod(valueFromChild) {
      // Do something with the value
      console.log(&#39;From the child:&#39;, valueFromChild);
    }
  }
}

Ini tidak salah sama sekali, adalah mungkin untuk melakukan ini.

// Child
export default {
  props: {
    method: { type: Function },
  },
  data() {
    return { value: 'I am the child.' };
  },
  mounted() {
    // Pass a value to the parent through the function
    this.method(this.value);
  }
}

Ini bukan cara terbaik untuk melakukannya dalam Vue. Sebaliknya, acara lebih sesuai untuk menyelesaikan masalah. Kita boleh mencapai perkara yang sama menggunakan peristiwa

Dalam komponen kanak-kanak kita mengeluarkan peristiwa:

<!-- Parent -->
<template>
  <ChildComponent @send-message="handleSendMessage" />
</template>

// Parent
export default {
  methods: {
    handleSendMessage(event, value) {
      // Our event handler gets the event, as well as any
      // arguments the child passes to the event
      console.log(&#39;From the child:&#39;, value);
    }
  }
}

Acara sangat berguna dalam Vue, tetapi ia juga tidak 100% menyelesaikan masalah kita masalah dengan berkesan. Kadangkala, kita perlu mengakses skop kanak-kanak daripada ibu bapa dengan cara yang berbeza.

// Child
export default {
  props: {
    method: { type: Function },
  },
  data() {
    return { value: 'I am the child.' };
  },
  mounted() {
    // Instead of calling the method we emit an event
    this.$emit('send-message', this.value);
  }
}

Untuk ini kami menggunakan slot berskop!

Menggunakan Slot Skop

Slot Skop ialah topik yang lebih lanjut, tetapi ia juga sangat berguna. Malah, saya fikir ia adalah salah satu ciri paling berkuasa yang ditawarkan oleh Vue.

Mereka melemahkan sempadan antara skop kanak-kanak dan skop ibu bapa. Tetapi ia dilakukan dengan cara yang sangat bersih, menjadikan komponen kami boleh digubah seperti dahulu.

Jika anda ingin mengetahui lebih lanjut tentang cara slot skop berfungsi, anda boleh membaca dokumentasi rasmi terlebih dahulu, atau kami akan menerangkannya pada masa akan datang.

【Cadangan berkaitan: "tutorial vue.js"]

Atas ialah kandungan terperinci Bolehkah prop melepasi fungsi dalam vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!