Analisis ringkas peranan komponen vue berskop

Artikel ini membawakan anda pengetahuan yang berkaitan tentang vue, yang terutamanya memperkenalkan isu yang berkaitan dengan atribut berskop Jika anda menambahkan atribut berskop pada gaya, anda akan menambahkannya pada label komponen ini lihat pada atribut bermula dengan data-v yang dijana secara rawak terakhir saya harap ia akan membantu semua orang.

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

skop komponen vue Fungsi

Tujuan: Menyelesaikan masalah konflik berbilang komponen dengan nama gaya yang sama

Keperluan: pemilih nama tag p, tetapkan warna latar belakang

Masalah : Didapati bahawa kedua-dua p di dalam komponen dan p di luar adalah berkesan

Penyelesaian: Tambahkan atribut berskop pada teg gaya dalam komponen Panel.vue

<style></style>

// style 添加 scoped 属性后，可以实现样式独立作用域<style>p{
    background-color: pink;}</style>

Tambahkannya pada gaya Atribut berskop akan menambah atribut yang dijana secara rawak bermula dengan data-v pada label komponen ini

dan ia mestilah elemen komponen semasa untuk mempunyai atribut tersuai ini dan digayakan Kesan

Ringkasan: tambah skop kepada gaya, gaya dalam komponen hanya berkuat kuasa dalam komponen vue semasa

Misi of scoped adalah sama seperti Function

Berikut ialah demo yang dibuat dengan vue. Mari kita lihat peranan scoped dan berikannya kepada mereka Tambahkan merah pada teg satu halaman, dan jangan tambahkan gaya pada yang lain, dan jangan gunakan scoped dalam gaya, seperti yang ditunjukkan di bawah

Semua orang patut tahu jawapannya, Betul! Teks pautan dalam kedua-dua halaman menjadi merah Apabila kita mengklik pada halaman juejin, pelayar akan secara automatik memperkenalkan gaya halaman semasa Apabila kita mengklik pada github semula, pelayar akan menggunakan semula gaya ini, jadi warna pautan a akan bertukar menjadi merah, kerana Vue ialah aplikasi satu halaman, jadi gaya setiap halaman yang kami buka akan diapit ke dalam gaya global Penyelesaiannya adalah untuk menambah skop Pada masa ini, warna teg akan berbeza. Mari buka halaman untuk melihat teg Seterusnya (gambar di bawah)

Pada masa ini, teg a mempunyai data tambahan-v-xxxxxxx, yang Vue tambah untuk kita Seperti di atas, apabila Vue membina projek ini, ia akan mengingatkan kita untuk menggunakan unit komponen Semua elemen di bawah komponen yang berbeza akan ditambah dengan ID komponen yang sama, dan pada masa yang sama, pemilih atribut akan digunakan dalam gaya yang kami tulis. Sambungkan pengecam unik ini dan mari sahkannya, (gambar di bawah)

Ya, selepas kami menambah skop, Vue akan berada dalam ini style Tambahkan atribut ini pada perenggan terakhir, dan kemudian pilih elemen melalui pemilih atribut untuk mengasingkan gaya elemen Seterusnya, mari kita lihat kesan sampingan scoped

Kesan sampingan scoped

.

Pada masa ini Kami memperkenalkan elemen-ui untuk mengesahkan kesan sampingan scoped Berikut adalah demo (gambar di bawah Scoped

juga digunakan di sini tiada elemen input di sini Contohnya, data-v- Pengecam unik xxxxxx

Tetapi bagaimanakah gaya yang kita tulis sendiri (input saya-Txt) selepas ia dibina? (Gambar di bawah)

Seperti yang ditunjukkan dalam gambar di atas, gaya yang kami tulis sendiri telah disambung dengan pengecam unik ini, jadi tidak kira bagaimana kami beroperasi, kami tidak boleh tekan elemen ini, maksudnya, Vue tidak menambahkan logo ini pada input ini, tetapi menambahkan logo ini pada gaya kami. Walau bagaimanapun, jika kami mengalih keluar skop, kami boleh mencapai sasaran, tetapi kami tidak mengesyorkan ini dibungkus ke dalam gaya bersatu Ini adalah kesan sampingan scoped. Jadi bagaimana kita menyelesaikannya? Penembusan gaya

<style>
.my-Txt {
  width: 200px;
}
.my-Txt ::v-deep input {
  background-color: pink;
}
</style>

Kita dapat melihat bahawa pengecam unik ini dijalankan dari belakang input ke belakang my-Txt, yang bermaksud bahawa jika kita tidak menambah ini::v-deep, Vue akan sentiasa menyambung pengecam unik ini ke dalam gaya yang kita tulis Dalam perenggan terakhir, jika kita ingin menukar kedudukan pengecam unik ini, kita perlu menentukannya dengan penembusan gaya Kemudian gambar di atas bermakna elemen my-Txt dengan pengecam unik ini akan digunakan pada input dalam elemen anak gaya ini, dan my-Txt yang kami tulis juga mempunyai pengecam unik ini, seperti yang anda boleh lihat daripada gambar di atas.

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

Atas ialah kandungan terperinci Analisis ringkas peranan komponen vue berskop. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!