Apakah yang didedahkan dalam Vue3.2? Apa gunanya?

Dedahan baharu dalam Vue3.2 digunakan untuk apa? Artikel berikut akan memberi anda pemahaman yang baik tentang alat dedah Vue3.2 Saya harap ia akan membantu anda!

Dengan keluaran Vue 3.2, alat gubahan baharu disediakan kepada kami yang dipanggil expose. (Belajar perkongsian video: tutorial video vue)

Pernahkah anda mencipta komponen yang perlu menyediakan beberapa kaedah dan sifat kepada templat, tetapi anda mahu kaedah ini bersifat peribadi kepada komponen dan tidak boleh Dipanggil oleh kelas induk?

Jika anda sedang membangunkan komponen sumber terbuka atau pustaka, anda mungkin mahu merahsiakan beberapa kaedah dalaman. Sebelum Vue 3.2, ini tidak mudah dicapai kerana semua kaedah atau data dsb. yang diisytiharkan dalam API pilihan adalah awam, jadi templat boleh mengaksesnya.

Perkara yang sama berlaku untuk API gubahan. Semua yang kami pulangkan daripada kaedah setup boleh diakses terus oleh kelas induk.

API Komposisi

Mari kita lihat contoh praktikal. Bayangkan kita mempunyai komponen yang mencipta pembilang dan mengemas kini pembilang ini setiap saat.

** MyCounter.vue**

<template>
    <p>Counter: {{ counter }}</p>

    <button @click="reset">Reset</button>
    <button @click="terminate">☠️</button>
</template>

<script>
import { ref } from 'vue'

export default {
  setup () {
    const counter = ref(0)

    const interval = setInterval(() => {
      counter.value++
    }, 1000)

    const reset = () => {
      counter.value = 0
    }

    const terminate = () => {
      clearInterval(interval)
    }

    return {
      counter,
      reset,
      terminate
    }
  }
}
</script>

Dari perspektif gubahan, saya ingin komponen induk dapat memanggil kaedah reset terus jika perlu -- tetapi saya ingin mengekalkan terminate fungsi dan rujukan kepada counter hanya tersedia untuk komponen.

Jika kita membuat instantiate komponen ini ke dalam kelas induk, seperti App.vue, dan melampirkan rujukan ref padanya, kita boleh dengan mudah membiarkan kelas induk memanggil kaedah reset, kerana apabila kita pergi dari When ia dikembalikan dalam setup, ia telah pun terdedah bersama dengan terminate.

App.vue

<template>
  <MyCounter ref="counter" />

  <button @click="reset">Reset from parent</button>
  <button @click="terminate">Terminate from parent</button>
</template>

<script>
import MyCounter from '@/components/MyCounter.vue'

export default {
  name: 'App',
  components: {
    MyCounter
  },
  methods: {
    reset () {
      this.$refs.counter.reset()
    },
    terminate () {
      this.$refs.counter.terminate()
    }
  }
}
</script>

Jika anda menjalankan ini sekarang dan klik butang tetapkan semula atau bunuh, kedua-duanya akan berfungsi.

Mari kita jelaskan perkara yang ingin kita dedahkan (expose) kepada kelas induk supaya hanya fungsi reset tersedia.

** MyCounter.vue**

<script>
import { ref } from 'vue'

export default {
  setup (props, context) {
    const counter = ref(null)

    const interval = setInterval(() => {
      counter.value++
    }, 1000)

    const reset = () => {
      counter.value = 0
    }

    const terminate = () => {
      console.log(interval)
      clearInterval(interval)
    }

    context.expose({ reset })

    return {
      counter,
      reset,
      terminate
    }
  }
}
</script>

Di sini, kami menambahkan parameter setup dan props pada fungsi context. Kita perlu menyediakan konteks kerana di sinilah fungsi expose berada. Kita juga boleh menggunakan pemfaktoran semula seperti ini: { expose }.

Seterusnya, kami menggunakan context.expose untuk mengisytiharkan objek elemen yang kami mahu dedahkan kepada kelas induk yang membuat instantiate komponen ini, kami hanya akan menyediakan kefungsian reset.

Jika kami menjalankan contoh ini sekali lagi dan mengklik butang "Tamatkan daripada ibu bapa", kami akan mendapat ralat. Ciri

Uncaught TypeError: this.$refs.counter.terminate is not a function

terminate tidak lagi tersedia dan API peribadi kami kini tidak boleh diakses.

API Pilihan

Di atas kami menggunakan composition API dalam exponse, tetapi kaedah ini juga boleh digunakan dalam API pilihan. Kita boleh menulis semula seperti berikut.

//  MyCounter.vue


export default {
  created () { ... },
  data: () => ({ counter: null }),
  methods: {
    reset () { ... },
    terminate () { ... }
  },
  expose: ['reset']
}

Perhatikan bahawa kami telah menambahkan sifat Options API baharu expose yang membolehkan kami menghantar dalam tatasusunan dengan rentetan 'reset' ialah nama fungsi yang kami dedahkan.

Menggabungkan Fungsi Rendering API

Cara untuk mencipta komponen yang berkuasa dan fleksibel adalah dengan memanfaatkan kuasa fungsi pemaparan. Ini bukan perkara baharu kepada Vue 3, tetapi dengan penubuhan API gubahan, kami kini mempunyai fleksibiliti untuk mengembalikan fungsi API komposisi setup terus daripada kaedah h.

Ini menimbulkan masalah kerana dalam fungsi setup kami, keseluruhan pernyataan return hanyalah kaedah h yang mengandungi nod yang dibuat oleh komponen.

Jika kita memilih untuk mendedahkan sesuatu kepada kelas induk pada ketika ini, kita akan menghadapi masalah yang bertentangan dengan apa yang kita lihat sebelum ini. Tiada apa-apa yang terdedah kerana tiada apa yang dikembalikan kecuali elemen DOM.

Mari kita ganti komponen MyCounter.vue untuk menggunakan kaedah ini.

<script>
// The template has been deleted
import { ref, h } from 'vue'

export default {
  setup (props, context) {
    const counter = ref(0)

    const interval = setInterval(() => {
      counter.value++
    }, 1000)

    const reset = () => {
      counter.value = 0
    }

    const terminate = () => {
      clearInterval(interval)
    }

    // context.expose({ reset })

    return () => h('div', [
      h('p', `Counter: ${counter.value}`),
      h('button', { onClick: reset }, 'Reset'),
      h('button', { onClick: terminate }, 'Terminate')
    ])
  }
}
</script>

Perhatikan bahawa kami mengimport h daripada Vue di bahagian atas kerana kami memerlukannya untuk mencipta elemen DOM kami.

Untuk menggambarkan masalah, kaedah context.expose diulas buat sementara waktu.

Pernyataan pemulangan kini menyalin struktur DOM <template> kami sebelum ini dan jika kami menjalankan contoh ini, kami dapat mengklik butang tetapan semula dan mematikan pada elemen dengan betul.

Walau bagaimanapun, jika kami mengklik butang "Tetapkan semula daripada ibu bapa" sekarang, kami akan menghadapi ralat. Kaedah

Uncaught TypeError: this.$refs.counter.reset is not a function

reset tidak lagi terdedah kerana ia tidak dikembalikan oleh fungsi setup. Untuk menyelesaikan masalah ini, kami perlu membatalkan panggilan ke context.expose untuk menjadikannya tersedia semula.

Ringkasan

Kaedah expose baharu adalah sangat intuitif dan mudah untuk dilaksanakan dalam komponen kami. Ia menyelesaikan beberapa isu komposisi yang sangat penting yang memerlukan penulisan semula keseluruhan komponen pada masa lalu, jadi walaupun ia bukan API yang anda gunakan setiap hari, ia berbaloi untuk dikumpulkan dalam folder kami dan mengumpulkan habuk.

Teks asal bahasa Inggeris: https://www.vuemastery.com/blog/understanding-vue-3-expose/

[Cadangan tutorial video berkaitan: Bermula dengan tutorial vuejs, Bermula dengan bahagian hadapan web]

Atas ialah kandungan terperinci Apakah yang didedahkan dalam Vue3.2? Apa gunanya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!