Terdapat beberapa slot dalam vue

Terdapat 3 jenis slot dalam vue: 1. Slot lalai, sintaks "<slot></slot>" 2. Slot bernama, sintaks ""; 3. Slot skop, sintaks "".

Persekitaran pengendalian tutorial ini: sistem Windows 7, vue versi 2.9.6, komputer DELL G3.

Slot Vue terbahagi terutamanya kepada tiga jenis:

Slot lalai, slot bernama, Slot slot skop

Slot dalam vue merujuk kepada pemegang tempat dalam komponen anak yang diberikan kepada komponen induk
diwakili oleh label dan komponen induk boleh mengisi ruang letak ini Sebarang kod templat, seperti HTML, komponen, dsb., kandungan yang diisi akan menggantikan tag komponen kanak-kanak (gantikan ruang letak).

Slot lalai

Slot lalai ialah slot paling mudah, selaras dengan penerangan di atas, iaitu menggantikan pemegang tempat Simbol mencapai kesan perubahan kandungan dalam komponen anak dalam komponen induk.

Sintaks: <slot></slot>

Letakkan pemegang tempat (slot) dalam komponen anak:

<template>
    <span>
        <span>莎莎减肥</span>
        <slot></slot>
    </span>
</template>

<script>
export default {
    name: &#39;chassList&#39;
}
</script>

Kemudian rujuk komponen anak ini dalam komponen induk, dan Isi kandungan pemegang tempat ini (slot):

<template>
    <div>
        <span>今天吃啥：</span>
        <chassList>
            <span>大嫂不让莎莎吃饭</span>
        </chassList>
    </div>
</template>

Pada masa ini, kandungan yang dipaparkan pada halaman itu ialah [Apa yang hendak dimakan hari ini: Kakak ipar Sasha yang kehilangan berat badan tidak akan membenarkan Sasha makan ].

Slot bernama

Sebagai contoh, jika terdapat dua tempat (dua slot) di mana pemegang tempat perlu diganti dalam subkomponen, maka Jika komponen induk ingin mengisi kandungan yang sepadan ke dalam slot yang sepadan, tidak ada cara untuk menentukan slot mana kandungan yang sepadan harus diisi dengan bergantung pada slot lalai. Untuk menangani senario sedemikian, slot yang dinamakan telah wujud.

Slot yang dinamakan sebenarnya untuk memberi nama kepada slot dalam komponen anak, dan komponen induk boleh mengisi slot yang sepadan mengikut nama ini apabila merujuk komponen anak.

Sintaks: <slot name="名称"></slot>

Letakkan dua slot bernama dalam komponen anak:

<template>
    <div>
        <span>第一个插槽</span>
        <slot name="one"></slot>
        <span>第二个插槽</span>
        <slot name="two"></slot>
    </div>
</template>

<script>
export default {
    name: &#39;chassList&#39;
}
</script>

Rujuk komponen anak dalam komponen induk dan lulus slot v:[ name] untuk mengisi kandungan yang sepadan ke dalam slot yang sepadan:

<template>
    <div>
        <span>两个插槽：</span>
        <chassList>
            <template v-slot:one>
                <span>one，</span>
            </template>
            <template v-slot:two>
                <span>two</span>
            </template>
        </chassList>
    </div>
</template>

Pada masa ini, kandungan yang dipaparkan pada halaman ialah [dua slot: slot pertama satu, slot pertama Dua slot dua].

Nota tentang penggunaan slot lalai dan slot bernama

1 Jika terdapat berbilang slot lalai dalam komponen anak, maka semua slot lalai dalam komponen induk akan menjadi diberikan kepada slot lalai Kandungan isian slot (tiada slot bernama dinyatakan) akan diisi sepenuhnya dalam setiap slot lalai komponen anak.

2. Walaupun susunan pengisian slot yang dinamakan terganggu dalam komponen induk, selagi nama slot yang dinamakan sepadan, kandungan yang diisi boleh diberikan dengan betul ke dalam slot bernama yang sepadan, a Lobak merah adalah lubang.

3 Jika terdapat kedua-dua slot lalai dan slot bernama dalam komponen anak, tetapi slot bernama yang dinyatakan dalam komponen induk tidak boleh ditemui dalam komponen anak, maka kandungan akan dibuang terus tanpa diisi ke dalam. slot lalai.

Slot skop

Slot skop lebih sukar untuk difahami dan difahami daripada slot lalai dan penggunaan slot yang dinamakan.

• Dua slot pertama menekankan [kedudukan] mengisi ruang letak;

• Slot skop menekankan data [Skop] tindakan; 🎜>

• Slot skop ialah slot dengan parameter (data); kepada komponen induk Parameter (data) ini hanya sah dalam slot Komponen induk boleh menyesuaikan kandungan paparan berdasarkan parameter slot (data) yang dihantar daripada komponen anak.
  Sintaks:

Letakkan slot dengan parameter (data) dalam komponen anak:

<slot :自定义name=data中的属性或对象></slot>Rujuk komponen anak dalam komponen induk, Dan gunakan slot-skop untuk menerima parameter yang diluluskan dalam slot sub-komponen dan menggunakan data.

Pada masa ini, kandungan yang dipaparkan pada halaman ialah [slot skop: nilai parameter dalam slot ialah satu].

<template>
    <div>
        <span>插槽中的参数值是</span>
        <slot :isAllwo="isAllwo"></slot>
    </div>
</template>

<script>
export default {
    name: &#39;classList&#39;,
    data() {
        return {
            isAllwo: {
                one: &#39;one&#39;,
                two: &#39;two&#39;
            }　　
        }
    }
}
</script>

Oleh kerana {

{}} dalam templat menyokong ungkapan, pada masa ini, anda boleh menggunakan nilai parameter berbeza​​​yang diluluskan oleh subkomponen untuk menyesuaikan kandungan halaman.

<template>
    <div>
        <span>作用域插槽：</span>
        <classList>
            <template slot-scope="isAllwo">
                {{ isAllwo.isAllwo.one}}
            </template>
        </classList>
    </div>
</template>

Pada masa ini, jika parameter yang diluluskan dalam subkomponen ialah nilai nol, kandungan paparan halaman akan menjadi [Slot Skop: Nilai parameter dalam slot ialah nilai nol].

Slot skop mempunyai pelbagai senario penggunaan dan digunakan secara meluas dalam pelbagai rangka kerja Contohnya, dalam ElementUI, menyesuaikan kandungan paparan baris atau lajur jadual tertentu dipanggil slot skop Senario aplikasi biasa daripada slot.

<template>
    <div>
        <span>作用域插槽：</span>
        <classList>
            <template slot-scope="isAllwo">
                {{ isAllwo.isAllwo.one|| &#39;空值&#39; }}
            </template>
        </classList>
    </div>
</template>

[Cadangan berkaitan: "

tutorial vue.js

"]

Atas ialah kandungan terperinci Terdapat beberapa slot dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!