Vue penerangan terperinci slot untuk meningkatkan kebolehskalaan komponen

Artikel ini membawakan anda pengetahuan yang berkaitan tentang vue Ia terutamanya memperkenalkan isu berkaitan slot yang meningkatkan kebolehskalaan komponen Slot komponen juga untuk menjadikan komponen yang kami rangkumkan lebih unik pengguna untuk menentukan kandungan yang hendak dipaparkan di dalam komponen. Mari kita lihat padanya.

[Cadangan berkaitan: tutorial video javascript, tutorial vue.js]

slot slot

Slot komponen

• Slot komponen juga untuk menjadikan komponen berpakej kami lebih berskala Seks .

• membolehkan pengguna menentukan kandungan di dalam komponen yang dipaparkan.

Bagaimana untuk merangkum komponen tersebut? slot

Mereka juga mempunyai banyak perbezaan, tetapi mereka juga mempunyai banyak kesamaan.

Jika kita merangkum komponen secara individu, ia jelas tidak sesuai: contohnya, jika setiap halaman dikembalikan, kita perlu merangkum bahagian kandungan ini berulang kali.
Walau bagaimanapun, jika kita merangkumnya menjadi satu, ia kelihatan tidak munasabah: ada yang menu di sebelah kiri, ada yang kembali, ada yang mencari di tengah, ada yang teks, dll.

Bagaimana untuk merangkumnya dengan sewajarnya?

Keluarkan persamaan dan kekalkan perbezaan.

Cara terbaik untuk merangkum adalah dengan mengekstrak ciri biasa ke dalam komponen dan mendedahkan yang berbeza sebagai slot.
Sebaik sahaja kami menempah slot, pengguna boleh menentukan kandungan yang hendak dimasukkan ke dalam slot mengikut keperluan mereka sendiri.
Adakah kotak carian, teks atau menu. Terpulang kepada pemanggil untuk membuat keputusan.

Penggunaan asas slot

• Dalam subkomponen, anda boleh menggunakan elemen khas untuk membuka slot bagi subkomponen.
• Apa yang dimasukkan oleh slot ini bergantung pada cara komponen induk digunakan.

Gunakan contoh mudah untuk menentukan slot bagi subkomponen: Kandungan dalam
<slot></slot> bermakna jika tiada kandungan lain dimasukkan ke dalam komponen, ia akan dipaparkan secara lalai . Kandungan

nbsp;html>



    <meta>
    <meta>
    <title>Document</title>
    <script></script>



    <div>
        <cpn><button>按钮</button></cpn>
        <cpn><span>aaaaa</span></cpn>
    </div>
    <template>
        <div>
            <h2>我是子组件</h2>
            <h3>hahaha</h3>
            <slot></slot>
        </div>
    </template>
    <script>
        let app = new Vue({
            el: &#39;#app&#39;,
            components: {
                cpn: {
                    template: &#39;#cpn&#39;,
                }
            }
        })
    </script>

Slot slot dinamakan

Apabila fungsi subkomponen adalah kompleks, slot bagi subkomponen mungkin bukan Ia adalah .

Sebagai contoh, jika kita merangkum subkomponen bar navigasi, kita mungkin memerlukan tiga slot, masing-masing mewakili kiri, tengah dan kanan. Jadi, apabila memasukkan kandungan ke dalam slot, bagaimana untuk membezakan mana yang dimasukkan?

Bagaimana untuk menggunakan slot bernama?

• Hanya berikan elemen slot atribut nama
• <slot name="'myslot'"></slot>

nbsp;html>



    <meta>
    <meta>
    <title>Document</title>
    <script></script>



    <div>
        <cpn><button>按钮1</button></cpn>
        <cpn><span>aaaaa</span>
            <button>按钮2</button></cpn>
    </div>
    <template>
        <div>
            <h2>我是子组件</h2>
            <h3>hahaha</h3>
            <slot></slot><br>
            <slot></slot>
        </div>
    </template>
    <script>
        let app = new Vue({
            el: &#39;#app&#39;,
            components: {
                cpn: {
                    template: &#39;#cpn&#39;,
                }
            }
        })
    </script>

Slot skop

Intipati:

Komponen induk menggantikan label slot, tetapi kandungannya disediakan oleh komponen anak.

Keperluan:

Subkomponen termasuk set data, seperti: pLanguages: ['JavaScript', 'Python', 'Swift', 'Go', 'C ']
Perlu dipaparkan pada berbilang antara muka:

• Sesetengah antara muka Ia dipaparkan satu demi satu dalam arah mendatar
• Sesetengah antara muka dipaparkan dalam bentuk senarai
• Sesetengah antara muka secara langsung memaparkan tatasusunan

Kandungan berada dalam subkomponen. Ingin dipaparkan dalam komponen induk:

• Gunakan slot skop slot

Apabila komponen induk menggunakan komponen anak kita , daripada komponen anak Dapatkan data:

• Dapatkan atribut slotProps melalui <template slot-scope="slotProps"></template>
• Gunakan slotProps.data untuk mendapatkan data yang baru kami hantar

<div>
        <cpn></cpn>
        <cpn>
            <template>
                <span>{{slot.data.join('-')}}</span>
            </template>
        </cpn>
        <cpn>
            <template>
                <span>{{slot.data.join('*')}}</span>
            </template>
        </cpn>
    </div>

<template>
        <div>
            <slot>
                <ul>
                <li>{{item}}</li>
                </ul>
            </slot>
        </div>
    </template>

nbsp;html>



    
    
    
    <script></script>



    <div>
        <cpn></cpn>
        <cpn>
            <template>
                <span>{{slot.data.join('-')}}</span>
            </template>
        </cpn>
        <cpn>
            <template>
                <span>{{slot.data.join('*')}}</span>
            </template>
        </cpn>
    </div>
    <template>
        <div>
            <slot>
                <ul>
                <li>{{item}}</li>
                </ul>
            </slot>
        </div>
    </template>
    <script>
        let app = new Vue({
            el: &#39;#app&#39;,
            components: {
                cpn: {
                    template: &#39;#cpn&#39;,
                    data() {
                        return {
                            pLanguages: [&#39;JavaScript&#39;, &#39;Python&#39;, &#39;Swift&#39;, &#39;Go&#39;, &#39;C++&#39;],
                        }
                    }
                }
            }
        })
    </script>

[Pengesyoran berkaitan: tutorial video javascript, tutorial vue.js]

Atas ialah kandungan terperinci Vue penerangan terperinci slot untuk meningkatkan kebolehskalaan komponen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!