Bagaimana untuk memantau perubahan slot Vue? Cuba helah ini!

Bagaimana untuk memantau perubahan slot Vue? Artikel berikut akan memperkenalkan kepada anda cara memantau perubahan dalam slot Vue, saya harap ia akan membantu anda!

Baru-baru ini, saya perlu mengemas kini keadaan komponen apabila kandungannya (slot, subkomponen, dll.) berubah. Untuk konteks, ia merupakan komponen borang yang menjejaki status kesahihan inputnya.

Coretan kod di bawah ditulis dalam Options format API, tetapi boleh digunakan dalam kedua-dua Vue2 dan Vue2 kecuali yang dinyatakan. [Cadangan berkaitan: tutorial video vuejs]

Mula

Mulakan dengan mengawal status borang, ubah suai kelas mengikut status dan gunakan kandungan kanak-kanak<slot/>Padding:

<template>
  <form :class="{ &#39;--invalid&#39;: isInvalid }">
    <slot />
  </form>
</template>

<script>
export default {
  data: () => ({
    isInvalid: false,
  }),
};
</script>

Untuk mengemas kini atribut isInvalid, kami perlu menambah peristiwa yang dicetuskan Anda boleh menggunakan acara sumit, tetapi saya lebih suka menggunakan input acara.

7 acara bentuk: fokus, kabur, input, pilih, tukar, tetapkan semula, serahkan, dll. Untuk penjelasan terperinci, sila baca artikel ini: https://blog.csdn.net /qq_4379 ...

Borang tidak akan memadamkan acara input, tetapi kita boleh menggunakan "wakil acara". Kami melampirkan pendengar pada elemen induk (<form>) dan ia akan dicetuskan apabila peristiwa berlaku pada elemen anaknya (<input>, <select>, <textarea>, dsb.).

Bila-bila masa acara <slot> dicetuskan dalam input komponen ini, borang akan menangkap acara tersebut.

<template>
  <form :class="{ &#39;--invalid&#39;: isInvalid }" @input="validate">
    <slot />
  </form>
</template>

<script>
export default {
  data: () => ({
    isInvalid: false,
  }),
  methods: {
    validate() {
      // 验证逻辑
    }
  }
};
</script>

Logik pengesahan boleh menjadi mudah atau kompleks. Untuk tujuan tunjuk cara, artikel ini menggunakan kaedah mudah untuk menggunakan API form.checkValidity() untuk menyemak sama ada borang itu sah berdasarkan atribut pengesahan HTML.

untuk mengakses elemen <form>. Anda boleh menggunakan atribut refs atau $el. Untuk memudahkan, artikel ini menggunakan $el.

<template>
  <form :class="{ &#39;--invalid&#39;: isInvalid }" @input="validate">
    <slot />
  </form>
</template>

<script>
export default {
  data: () => ({
    isInvalid: false,
  }),
  methods: {
    validate() {
      this.isInvalid = !this.$el.checkValidity()
    }
  }
};
</script>

Masalah

Ada sedikit masalah di sini. Apakah yang berlaku jika kandungan borang berubah? Apakah yang berlaku jika <input> ditambahkan pada DOM pada pemuatan borang?

Sebagai contoh, kami memanggil komponen borang ini "MyForm" Dalam Apl, kandungannya adalah seperti berikut:

// App.vue
<template>
  <MyForm>
    <input
      v-model="showInput"
      id="toggle-name"
      name="toggle-name"
      type="checkbox"
    />
    <label for="toggle-name">显示其它 input</label> 

    <template v-if="showInput">
      <label for="name">Name:</label>
      <input id="name" name="name" required />
    </template>

    <button type="submit">提交</button>
  </MyForm>
</template>

<script>
import Form from "./components/form.vue";
export default {
  name: "App",
  components: {
    MyForm: Form,
  },
  data: () => ({
    showInput: false,
  }),
};
</script>

Apabila App.vue menyembunyikan dan memaparkan <🎜 tertentu melalui syarat >. , borang kita perlu tahu. Dalam kes ini, kami akan memikirkan untuk menjejaki kesahihan kandungan borang apabila ia berubah, bukan hanya pada input peristiwa atau input cangkuk kitaran hayat. Jika tidak, maklumat yang salah mungkin dipaparkan. mounted

Rakan yang biasa dengan cangkuk kitaran hayat Vue mungkin terfikir untuk menggunakan

untuk menjejaki perubahan. Secara teori, ini kedengaran hebat. Dalam amalan, ia mencipta gelung tak terhingga dan pelayar hang. update

Penyelesaian

Selepas beberapa penyelidikan dan ujian, penyelesaian terbaik ialah menggunakan API

. Ia ialah kaedah terbina dalam penyemak imbas yang menyediakan keupayaan untuk memantau perubahan pada pepohon DOM API ini boleh dimaklumkan jika nod ditambahkan atau dialih keluar, perubahan atribut atau perubahan kandungan teks. MutationObserver

Ia adalah kaedah asli, jadi ia tidak terhad kepada rangka kerja. Apabila menggunakan

, mula-mula gunakan pembina

untuk mencipta tika pemerhati baharu dan nyatakan fungsi panggil balik tika ini. Dipanggil selepas setiap perubahan DOM, panggilan balik ini dipanggil. Fungsi panggil balik menerima dua parameter, yang pertama ialah tatasusunan perubahan, dan yang kedua ialah contoh pemerhati Tulis semula komponen MutationObserver kami seperti berikut: form

<template>
  <form :class="{ &#39;--invalid&#39;: isInvalid }" @input="validate">
    <slot />
  </form>
</template>

<script>
export default {
  data: () => ({
    isInvalid: false,
  }),
  mounted() {
    const observer = new MutationObserver(this.validate);
    observer.observe(this.$el, {
      childList: true,
      subtree: true,
    });
    this.observer = observer;
  },
  methods: {
    validate() {
      this.isInvalid = !this.$el.checkValidity();
    },
  },
  beforeUnmount() {
    this.observer.disconnect();
  },
};
</script>


<style scoped>
</style>

Anda juga perlu menggunakan

kitaran hayat di sini. acara untuk memutuskan sambungan beforeUnmount, yang mengosongkan sebarang memori yang diperuntukkan. observer

Akhir sekali, kami menghantar keadaan

ke slot pemalam kandungan yang ingin kami akses. Ini juga dipanggil slot skop dan sangat berguna. isInvalid

<template>
  <form :class="{ &#39;--invalid&#39;: isInvalid }" @input="validate">
    <slot v-bind="{ isInvalid }" />
  </form>
</template>

<script>
export default {
  data: () => ({
    isInvalid: false,
  }),
  mounted() {
    const observer = new MutationObserver(this.validate);
    observer.observe(this.$el, {
      childList: true,
      subtree: true,
    });
    this.observer = observer;
  },
  methods: {
    validate() {
      this.isInvalid = !this.$el.checkValidity();
    },
  },
  beforeUnmount() {
    this.observer.disconnect();
  },
};
</script>

Dengan persediaan ini, kami boleh menambah sebarang bilangan

pada komponen borang kami dan menambah sebarang logik pemaparan bersyarat yang diperlukan. Selagi atribut pengesahan HTML input digunakan, borang akan menjejaki sama ada ia berada dalam keadaan sah. input

Selain itu, memandangkan kami menggunakan slot berskop, kami memberikan keadaan borang kepada ibu bapa, supaya ibu bapa boleh bertindak balas terhadap perubahan dalam kesahihan.

Contohnya, dalam

, kita nak "disable" butang submit bila borang tak sah, kita boleh tulis macam ni App.vue

<template>
  <MyForm>
    <template slot:default="form">
      <label for="name">Name:</label>
      <input id="name" name="name" required>

      <button
        type="submit"
        :class="{ disabled: form.isInvalid }"
      >
        Submit
      </button>
    </template>
  </MyForm>
</template>

bagus~.

Semoga artikel ini dapat membantu untuk perkembangan masa depan anda.

(Belajar perkongsian video: pembangunan bahagian hadapan web, Video pengaturcaraan asas)

Atas ialah kandungan terperinci Bagaimana untuk memantau perubahan slot Vue? Cuba helah ini!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!