Fungsi kaedah dalam Vue3: Kuasai kaedah komunikasi antara komponen Vue3

Vue3 ialah salah satu rangka kerja bahagian hadapan yang paling popular pada masa ini. Ia sangat dipuji kerana ciri yang berkuasa dan API yang ringkas dan mudah digunakan. Vue3 menyediakan banyak cara untuk mengatur dan berinteraksi dengan pelbagai komponen, termasuk komunikasi antara komponen, pengurusan keadaan, komponen dinamik, dsb. Dalam Vue3, kita boleh menggunakan beberapa fungsi kaedah untuk melaksanakan komunikasi antara komponen Marilah kita menguasai kaedah ini.

1. props

props ialah ciri penting Vue3 Ia adalah cara untuk mentakrifkan sifat komponen dan memindahkan data. Jika anda perlu menghantar data daripada komponen kepada komponen anaknya, anda boleh menggunakan prop. Anda boleh menentukan tatasusunan sifat yang anda mahu terima dalam pilihan prop dalam komponen anak. Apabila anda menghantar sifat daripada komponen induk, sifat ini dihantar secara automatik kepada dan tersedia dalam komponen anak. Berikut ialah contoh mudah:

<template>
  <div>
    <Child :message="message" />
  </div>
</template>
<script>
import Child from './Child.vue'
export default {
  components: { Child },
  data() {
    return {
      message: 'Hello World!'
    }
  }
}
</script>

Dalam komponen Kanak-kanak, kita boleh menerima data melalui prop:

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
}
</script>

Perhatikan bahawa jenis setiap atribut perlu dinyatakan dalam pilihan prop, jadi bahawa Anda boleh memastikan bahawa jenis data yang dihantar ke dalam komponen anak adalah betul.

2. emit

emit ialah satu lagi kaedah komunikasi yang biasa digunakan antara komponen dalam Vue3. Apabila anda perlu mencetuskan peristiwa dalam komponen kanak-kanak, anda boleh menggunakan kaedah emit. Dalam komponen induk, anda boleh mendengar acara ini dan melakukan beberapa operasi. Berikut ialah contoh mudah:

<template>
  <div>
    <Child @alert="showAlert" />
  </div>
</template>
<script>
import Child from './Child.vue'
export default {
  components: { Child },
  methods: {
    showAlert(msg) {
      alert(msg)
    }
  }
}
</script>

Dalam komponen Kanak-kanak, kita boleh menggunakan $emit untuk mencetuskan peristiwa:

<template>
  <div>
    <button @click="onClick">Click Me</button>
  </div>
</template>
<script>
export default {
  methods: {
    onClick() {
      this.$emit('alert', 'Hello World!')
    }
  }
}
</script>

Apabila pengguna mengklik butang, komponen kanak-kanak akan mencetuskan amaran acara, dan hantar mesej kepada komponen induk.

3. menyediakan/menyuntik

menyediakan/menyuntik ialah satu lagi kaedah komunikasi antara komponen yang disediakan oleh Vue3. Ia berbeza sedikit daripada prop dan memancarkan kerana ia membolehkan anda memberikan beberapa data kepada komponen anak. Komponen kanak-kanak boleh menerima data ini melalui pilihan suntikan. Berikut ialah contoh mudah:

<template>
  <div>
    <Child />
  </div>
</template>
<script>
import Child from './Child.vue'
export default {
  provide: {
    message: 'Hello World!'
  },
  components: { Child }
}
</script>

Dalam komponen Kanak-kanak, kita boleh menggunakan pilihan suntikan untuk menerima data ini:

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script>
export default {
  inject: ['message']
}
</script>

Perhatikan bahawa nama data yang perlu diterima ialah dinyatakan dalam pilihan suntikan Dengan cara ini anda boleh menggunakannya secara langsung dalam komponen kanak-kanak.

4. $ibu bapa / $anak

$ibu bapa dan $anak ialah dua alatan lain untuk komunikasi antara komponen yang disediakan oleh Vue3. $parent digunakan daripada komponen anak untuk mengakses sifat atau kaedah dalam komponen induknya, manakala $children digunakan daripada komponen induk untuk mengakses sifat atau kaedah dalam komponen anaknya. Memandangkan kedua-dua pilihan ini disediakan dalam Vue3, ia mungkin ditinggalkan dalam versi Vue3 yang akan datang.

5. $attrs / $listeners

$attrs dan $listeners ialah dua pilihan ajaib yang disediakan oleh Vue3. Pilihan $attrs menyediakan komponen dengan semua atribut yang dihantar kepadanya dan ia boleh digunakan dengan pilihan prop komponen kanak-kanak, seperti ini:

<template>
  <div>
    <Child v-bind="$attrs" />
  </div>
</template>
<script>
import Child from './Child.vue'
export default {
  components: { Child },
  data() {
    return {
      message: 'Hello World!'
    }
  },
  mounted() {
    console.log(this.$attrs) // { message: "Hello World!" }
  }
}
</script>

dalam komponen Kanak-kanak:

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
}
</script>

dalam Dalam contoh di atas, subkomponen boleh menggunakan pilihan $attrs untuk menerima dan menentukan pilihan prop yang sepadan. Pilihan

$listeners menyediakan komponen dengan semua pendengar acara dalam komponen induk. Ini akan membolehkan anda menggunakan pendengar acara ini dalam komponen kanak-kanak. Seperti yang ditunjukkan di bawah:

<template>
  <div>
    <button v-on="$listeners">Click Me</button>
  </div>
</template>
<script>
export default {
  mounted() {
    console.log(this.$listeners) // { 'click': [f1] }
  }
}
</script>

Apabila pengguna mengklik butang, pendengar acara dalam komponen induk akan dipecat.

Ringkasan

Artikel ini menyenaraikan kaedah komunikasi antara komponen yang biasa digunakan dalam Vue3. Kaedah ini termasuk: props, emit, provide/inject, $ibu bapa/$anak dan $attrs/$pendengar. Kaedah ini boleh membantu anda mengatur dan berinteraksi dengan pelbagai komponen dengan lebih baik, meningkatkan kecekapan pembangunan anda dan meningkatkan pengalaman pengguna. Dalam amalan, anda mungkin perlu menggunakan berbilang kaedah secara serentak untuk mencapai matlamat perniagaan anda, jadi pastikan anda mengetahui pilihan tersebut dan mengetahui bila dan tempat ia digunakan.

Atas ialah kandungan terperinci Fungsi kaedah dalam Vue3: Kuasai kaedah komunikasi antara komponen Vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!