Vue: Fitur: Konten cadangan untuk sebagian

Dibuat pada 11 Apr 2016 · 3Komentar · Sumber: vuejs/vue

Sebagian harus mendukung konten fallback - seperti halnya slot. Ini akan sangat meningkatkan keterbacaan template saat menggunakannya dengan cara tertentu:
Ada komponen dasar dengan beberapa logika (misalnya Dialog), dari mana komponen lain (misalnya PromptDialog) perlu diturunkan yang memiliki logika dan template (luar) yang sama. Ini dicapai dengan menggunakan sebagian yang serupa dengan slot yang digunakan - tetapi berdasarkan komponen dan bukan dengan instans.
Template seperti itu akan terlihat seperti ini:

<div>
  <div class="header">
    <partial name="header">
      <i class="fa-whatever"></i>
      {{title}}
    </partial>
  </div>
  <div class="body">
    <partial name="body">
      {{{body}}}
    </partial>
  </div>
  <div class="footer">
    <partial name="footer">
      <!-- some stuff for button rendering -->
    </partial>
  </div>
</div>

Tanpa fitur ini, saya perlu meletakkan konten semua simpul parsial di luar template - dan itu menjadi lebih buruk dengan parsial bersarang.
Mendekati masalah dengan menggunakan komponen dasar dalam templat yang diturunkan - sehingga memiliki instance bersarang tidak praktis, karena saya perlu mengarahkan sebagian besar data/alat peraga dan API dari luar (berasal semu) ke dalam (dasar) contoh.

Sumber

bfis

Komentar yang paling membantu

Saya akan mengatakan itu menyalahgunakan sebagian. Ini adalah ide yang buruk untuk melakukan ini karena cuplikan parsial Anda berasal dari induk sementara mengetahui konteks data anak. Ini adalah pemisahan yang ketat.

Komponen dialog tidak boleh memiliki status apa pun karena ini murni presentasi. Jangan mewariskan negara. Status dan konten yang ditampilkan harus milik komponen induk yang menggunakan dialog.

yyx990803 pada 11 Apr 2016

👍2

Semua 3 komentar

Maaf, saya tidak mengerti mengapa menggunakan slot alih-alih sebagian bukanlah pilihan :sweat_smile:
Apakah ada alasan untuk itu?

posva pada 11 Apr 2016

👍1

Saat menggunakan slot, _PromptDialog_ pseudo-derived akan memiliki template berikut.

<dialog
  :foo.sync="foo"
  >
  <input
    v-model="thePromptedValue"
    slot="body"
    >
</dialog>

Untuk setiap atribut _foo_ pada komponen _Dialog_ asli, saya harus memiliki atribut yang sama pada _PromptDialog_ luar dan meneruskannya ke dalam. Hal yang sama berlaku untuk semua metode yang didefinisikan pada _Dialog_: Saya perlu mendefinisikan proxy yang meneruskan panggilan ke inner. Ini menyusahkan dan mengalahkan ide di balik ekstensi komponen/warisan kelas.

bfis pada 11 Apr 2016

Komponen dialog tidak boleh memiliki status apa pun karena ini murni presentasi. Jangan mewariskan negara. Status dan konten yang ditampilkan harus milik komponen induk yang menggunakan dialog.

yyx990803 pada 11 Apr 2016

👍2

Apakah halaman ini membantu?

0 / 5 - 0 peringkat