Apakah komponen vue

Dalam vue, komponen ialah contoh Vue yang boleh diguna semula Ia mempunyai nama komponen unik Ia boleh memanjangkan elemen HTML dan menggunakan nama komponen sebagai teg HTML tersuai. Komponen boleh meningkatkan penggunaan semula kod dengan sangat baik.

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

Apakah komponen?

Komponen ialah konsep penting dalam Vue Ia adalah contoh Vue yang boleh digunakan semula Ia boleh memanjangkan elemen HTML dan menggunakan nama komponen sebagai HTML tersuai. Oleh kerana komponen adalah contoh Vue yang boleh diguna semula, mereka menerima pilihan yang sama seperti Vue() baharu, seperti data, pengiraan, jam tangan, kaedah dan cangkuk kitaran hayat. Satu-satunya pengecualian ialah pilihan khusus contoh akar seperti el.

Ekstrak beberapa modul biasa dan tuliskannya ke dalam komponen atau halaman alat yang berasingan, yang boleh dimasukkan terus ke dalam halaman yang diperlukan. Kemudian kita boleh mengekstraknya sebagai komponen untuk digunakan semula.

Sebagai contoh, jika berbilang halaman menggunakan komponen yang sama, ia boleh dijadikan komponen, yang meningkatkan kadar penggunaan semula kod.

Penggunaan komponen Vue

Mari kita bincangkan direktori kami dahulu

1. Cipta komponen B.vue kami

Begitu juga, Buat hello_word.vue baharu sebagai ibu bapa

Kemudian anda akan melihat hasilnya seperti ini

Isi penting:

Perkenalkan modul B.vue dalam hello_word.vue // import showB daripada './B.vue' Perkenalkan komponen

Pameran nama modul tersuai fail B

Komponen berdaftar

 components:{
          showB,        
        },
<showB /> //使用组件

Nota: Tentukan nama komponen dalam kotak unta, seperti: Gunakan PascalCase Gunakan kebab-case

Mula sampai ke prop topik utama

Komponen induk menghantar nilai kepada komponen anak (komponen induk mengikat data seperti: value="the "Working", komponen anak memperolehnya melalui props)
Pilihan props komponen anak boleh menerima data daripada komponen induk. Betul, ia hanya boleh diterima Props terikat sehala, iaitu, ia hanya boleh dihantar dari komponen induk kepada komponen anak, bukan sebaliknya.
Penggunaan adalah seperti berikut:

Komponen B

Komponen Induk

Kemudian anda akan melihat Pergi ke halaman dan memaparkan

mencetak nilai nilai di bawah ciptaan

hasil,

Komponen anak menghantar nilai ke komponen induk

Dalam komponen anak:

<p @click="chuanzhi">回复父组件</p>
chuanzhi() {
            this.$emit(&#39;msg&#39;, &#39;知道了知道了&#39;) //执行 msg 函数并把要改变的值作为参数带过去
        }

Komponen induk :

Perkenalkan @msg='msg' dalam DOM

<showB :value=&#39;text&#39; @msg=&#39;msg&#39;/> 
 msg(val){
                 console.log(val,&#39;val&#39;)
                 }

Terima melalui kaedah

Jalankan, klik untuk membalas komponen induk

Cetak hasil:

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati: Belajar Pengaturcaraan! !

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