Bagi sesiapa yang tidak mahu memautkan peristiwa yang dipancarkan, terdapat objek induk pada objek anak yang juga boleh digunakan untuk memancarkan peristiwa. Pastikan anda mendaftar pelancaran dalam induk untuk mengelakkan amaran dalam konsol.

Kanak-kanak

Hubungi terus ibu bapa $emit di sini.

Child.vue

<input @input="$parent.$emit('custom-event', e.target.value) />

Atau cara penggunaan:

<input @input="handleInput" />

export default {
  methods: {
    handleInput(e) {
      this.$parent.$emit('custom-event', e.target.value)
    }
  }
}

Ibu bapa

Oleh kerana ibu bapa yang memberi isyarat kepada nenek moyang, isytiharkan pelepasan di sini. Untuk kaedah ，只需使用 defineEmits() untuk mengisytiharkan pelepasan. Sila rujuk Dokumentasi.

Parent.vue

<Child /> <!-- No need to listen to the event here -->

export default {
   emits: ['custom-event'] // Register the emits
}

Jika menggunakan

<script setup>
  defineEmits(['custom-event']) // Register the emits
</script>

Atuk dan nenek

Kemudian dengarkan acara dalam komponen datuk dan nenek.

GrandParent.vue

<Parent @custom-event="doSomething()" /> <!-- The event is being listened to in the grandparent component -->

Begini cara saya melakukannya: kodkodand

Emits menerima hanya dua parameter, nama yang akan dipancarkan dan nilai yang akan dipancarkan. Jika berbilang nilai dipancarkan, ia mesti dipancarkan sebagai objek tunggal. Dalam penyelesaian saya, komponen Matahari mengeluarkan nama medan dan nilai sebagai objek tunggal

cucu

<input
    :value="personalInformation.first_name"
    @input="onInput('first_name', $event.target.value)"
    ...
>

onInput(field, value) {
  this.$emit("update-field", { field: field, value: value });
},

Objek kanak-kanak menangkap dan menyalin semula, tetapi terlebih dahulu mengambil berat untuk memancarkan dalam format yang diharapkan oleh komponen induk (ia mengambil keseluruhan objek data.primary kerana itulah yang ditetapkan kepada model v)

Kanak-kanak

<grandchild
    :personalInformation="modelValue.personalInformation"
    @updateField="UpdateField"
  />

UpdateField({ field, value }) {
  const newVal = this.modelValue;
  newVal.personalInformation[field] = value;
  this.$emit("update:modelValue", newVal);
}

Kemudian komponen induk akan menerima dan mengemas kini objek v-model data.primary secara automatik.

atau , saya mesti menyatakan bahawa anda sentiasa boleh menggunakan Pinia, perpustakaan pengurusan negeri rasmi untuk Vue (simpan beberapa keadaan dalam satu komponen dan baca keadaan yang sama daripada mana-mana komponen lain). Sudah tentu terdapat keluk pembelajaran, tetapi ia pasti berbaloi untuk dipelajari dan direka bentuk untuk memudahkan jenis situasi ini.