javascript - Dalam model pembangunan komponen vue.js, cara membuat gaya hanya digunakan pada komponen ini dan subkomponennya.

Question

Jika anda menggunakan scoped, gaya hanya boleh menjejaskan komponen semasa tetapi bukan sub-komponennya Kadang-kadang disebabkan masalah reka bentuk, terdapat banyak gaya yang dikongsi antara sub-komponen yang berbeza hanya digunakan pada komponen ini dan subkomponennya.

Answer 1

Jangan gunakan skop dan kawal ruang nama css sendiri

Anda boleh menamakan setiap komponen dengan kelas khusus dan unik, dan css komponen berada dalam skop penamaan ini.

Sebagai contoh, pengepala ialah subkomponen indeks

    .header-comp{
        h2{
            
        }
        .title{
        
        }
    }

    .index-view{
        .container{
        
        }
    }

Rendering akhir

    <p class="index-view">
        <p class="header-comp"></p>
    </p>

    .index-view{}
    .index-view xxx{}
    .header-comp{}
    .hader-comp .xxxx{}