Analisis ringkas tentang peranan slot dan slot yang dinamakan dalam Vue

Slot dalam Vue Saya percaya semua orang yang telah menggunakan Vue telah menggunakannya lebih kurang, tetapi adakah anda faham penggunaannya? Artikel ini akan membawakan anda penggunaan asas slot dan slot yang dinamakan dalam Vue. Saya harap ia akan membantu anda!

1. Slot

1.1 Fungsi Slot

⭐ ⭐
Pengenalan pertama kepada slot:

• Untuk menjadikan komponen ini lebih serba boleh, kami tidak boleh mengehadkan kandungan dalam komponen kepada tetap div, span, dll. Tunggu ini elemen; [Cadangan berkaitan: tutorial video vuejs]
• Sebagai contoh, dalam beberapa kes, kami menggunakan komponen dan berharap komponen akan memaparkan butang dalam beberapa kes, kami menggunakan komponen dan berharap untuk memaparkannya adalah gambar;
• Kami harus membenarkan pengguna memutuskan kandungan dan elemen apa yang disimpan di kawasan tertentu;
• Jadi kami boleh menggunakan slot untuk menyelesaikan masalah ini

Dalam erti kata lain, jika kita ingin menambah kandungan baharu pada tag komponen, maka kita perlu mengisytiharkan slot dalam komponen tersebut, jika tidak, kandungan baharu yang ditambah tidak akan dipaparkan

⭐⭐
Gunakan slot:

• Gunakan elemen slot sebagai slot
• Apa yang disisipkan ditentukan oleh cara elemen induk menggunakannya, mis komponen induk memasukkan butang dan gambar, gambar butang akan dipaparkan Jika tidak, ia tidak akan dipaparkan atau kandungan lalai slot akan dipaparkan
• Kadang-kadang kita berharap apabila menggunakan slot, jika kandungan yang sepadan tidak disisipkan , maka kami perlu memaparkan kandungan lalai:
• Sudah tentu, kandungan lalai ini hanya akan dipaparkan apabila tiada kandungan yang disisipkan disediakan
• Kami boleh menetapkannya dalam teg slot Kandungan lalai

Menggunakan sarung slot:

Komponen induk

App.vue

<template>
    <div class="app">
        <!-- 内容是button -->
        <show-message title="哈哈哈">
            <button>我是按钮元素</button>
        </show-message>
        <!-- 内容是超链接 -->
        <show-message>
            <a href="#">百度一下</a>
        </show-message>

        <!-- 没有值传递 -->
        <show-message></show-message>
    </div>
</template>

Komponen anak
showMessage.vue

<template>
    <h2 id="title">{{title}}</h2>
    <div class="content">
        <slot>
            <p>我是默认值</p>
        </slot>
    </div>
</template>

• Rendering:
  
  Kami dapati bahawa dalam komponen showMessage, kami memberikannya slot,
• dalam App.vue, kami menggunakan semula showMessage tiga kali,
• 一次为按钮, 一次为a标签, 一次什么也不加
• dan hasilnya, 一个为按钮, satu 个为a链接 , 一个为插槽默认的p标签
  

Kita dapat lihat bahawa

• Kandungan apa yang ingin anda paparkan dalam bahagian slot ditentukan oleh elemen induk, jika Jika tiada apa-apa dimasukkan ke dalam slot, maka slot akan diabaikan
• Dalam erti kata lain, jika slot digunakan dan elemen induk menggunakan butang, elemen anak akan memaparkan butang jika elemen induk menggunakan tajuk, elemen anak akan Memaparkan tajuk
• Jika subkomponen tidak mempunyai slot, ia tidak akan dipaparkan

1.2 Slot bernama Slot

⭐⭐

Kesan yang diingini adalah untuk memaparkan kandungan slot yang sepadan Pada masa ini, kita boleh menggunakan slot bernama:

• Seperti namanya, yang dinamakan. slot bermaksud memberi nama kepada slot. Elemen slot mempunyai attribute：name istimewa;
• A name tanpa slot akan mempunyai nama tersirat default menggunakan
• dalam komponen induk, anda perlu membungkusnya dengan tag
dan menggunakan
• templatev-solt: nama slot dinamakan slot dalam template Singkatan slot
• #
Komponen induk

App.vue

Komponen anak

<template>
    <nav-bar>
        <template v-slot:left>
            <button>返回</button>
        </template>

        <template v-slot:center>
            <span>内容</span>
        </template>

        <template v-slot:right>
            <a href="#">登录</a>
        </template>
    </nav-bar>
</template>

(anda boleh menukar warna dalam css sendiri) Pelarasan, saya menang 't put it here) NavBar.vue

Rendering:

<template>
    <div class="nav-bar">
        <div class="left">
            <slot name="left">left</slot>
        </div>
        <div class="center">
            <slot name="center">center</slot>
        </div>
        <div class="right">
            <slot name="right">right</slot>
        </div>
    </div>
</template>

Kesan yang dicapai ialah paparan yang sepadan dengan slot Jadi inilah peranan slot yang dinamakan

⭐⭐

Nama slot dinamik

Ikat nama secara dinamik melalui kaedah
;
v-slot:[dynamicSlotName]Ps: Terdapat juga slot skop, yang saya belum faham dengan baik. Jangan menulis lagi~

(Belajar perkongsian video:

pembangunan bahagian hadapan web

, Video pengaturcaraan asas)

Atas ialah kandungan terperinci Analisis ringkas tentang peranan slot dan slot yang dinamakan dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!