Div dalam komponen vue tidak boleh dipaparkan

Apabila kami menggunakan teg <div> dalam komponen Vue, jika tiada gaya berkaitan ditetapkan atau kandungan ditambah, teg <div> mungkin tidak dipaparkan. Biasanya, ini disebabkan oleh komponen Vue melakukan beberapa pemprosesan khas pada templatnya.

Mari kita analisa kemungkinan sebab dan penyelesaian langkah demi langkah:

1 Mekanisme pemaparan komponen Vue

Komponen Vue dikomponen melalui templat, ia dikelaskan kepada tiga jenis:

1. Komponen dengan komponen induk (kandungan slot kad)
2. Komponen tanpa komponen induk ( Komponen akar)
3. Komponen berfungsi (tidak berstatus dan tidak sepatutnya ada perubahan data)

Mekanisme pemaparan komponen Vue memerlukan setiap komponen Vue mestilah seperti Halaman bebas dan lengkap, iaitu setiap komponen Vue mesti mempunyai satu dan hanya satu unsur akar. Oleh itu, beberapa kaedah penulisan yang tidak teratur boleh menyebabkan komponen gagal dipaparkan.

2. Soalan Lazim

2.1 Komponen Vue tidak menambah kandungan

Jika komponen Vue hanya menambah tag <div> tanpa menambah sebarang kandungan, ia akan kelihatan seperti Ia tidak sama seperti yang diberikan.

Penyelesaian: Tambahkan beberapa kandungan atau tetapkan gaya berkaitan untuk menjadikannya kelihatan.

2.2 Hanya ada satu elemen punca dalam komponen Vue

Apabila kami menambah berbilang elemen punca pada komponen Vue, seperti yang ditunjukkan di bawah:

<template>
  <div class="container">
    <h1>这是标题</h1>
  </div>
  <div class="box">
    <p>这是内容</p>
  </div>
</template>

Pada masa ini kami mendapati bahawa Komponen tidak akan diberikan dan tiada ralat akan dilaporkan. Ini kerana Vue menetapkan bahawa setiap komponen hanya boleh mempunyai satu elemen akar.

Penyelesaian: Tukar kepada bentuk dengan hanya satu elemen akar, seperti ditunjukkan di bawah:

<template>
  <div>
    <div class="container">
      <h1>这是标题</h1>
    </div>
    <div class="box">
      <p>这是内容</p>
    </div>
  </div>
</template>

2.3 V-show, v-if dan arahan lain digunakan dalam komponen Vue

Apabila kami menggunakan arahan seperti v-show dan v-if dalam komponen Vue, disebabkan oleh mekanisme pemaparan komponen Vue, jika ungkapan terikat pada arahan ialah false, elemen itu tidak akan dipaparkan.

Contohnya:

<template>
  <div v-show="false">这是内容</div>
  <div v-if="false">这是内容</div>
</template>

Dalam kod di atas, kerana ungkapan v-show="false" dan v-if="false" adalah kedua-duanya false, kedua-dua teg <div> ini tidak akan dipaparkan.

Penyelesaian: Anda boleh menukar ungkapan terikat pada arahan ini kepada true, atau menambah kandungan atau gaya elemen supaya ia boleh dipaparkan.

2.4 Slot slot digunakan dalam komponen Vue

Apabila kami menggunakan slot slot dalam komponen Vue, mungkin terdapat masalah bahawa teg <div> tidak boleh dipaparkan.

Contohnya:

<template>
  <div>
    <slot></slot>
  </div>
</template>

Dalam kod di atas, memandangkan tiada kandungan atau gaya ditambahkan pada teg <div>, teg <div> kelihatan seperti belum dipaparkan.

Penyelesaian: Tambahkan beberapa kandungan atau gaya pada teg <div> untuk memaparkannya, seperti yang ditunjukkan di bawah:

<template>
  <div>
    <slot></slot>
    <div class="container">这是新添加的内容</div>
  </div>
</template>

3 Ringkasan

digunakan dalam komponen Vue masalah bahawa tag <div> tidak boleh diberikan biasanya disebabkan oleh mekanisme pemaparan komponen Vue, berbilang nod akar, ungkapan terikat pada arahan ialah false atau tiada kandungan ditambahkan pada slot. Kami boleh menyelesaikan masalah ini dengan mudah dengan menambahkan beberapa kandungan atau penggayaan.

Atas ialah kandungan terperinci Div dalam komponen vue tidak boleh dipaparkan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!