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

.

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

<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!