Bagaimana untuk melaksanakan kotak carian dalam vuejs

Cara melaksanakan kotak carian dalam vuejs: 1. Buat komponen logo dan bahagian kotak carian 2. Buat objek Vue kosong yang baharu 3. Gunakan "bus.$emit("change",index );" Hanya cetuskan peristiwa dan lulus parameter.

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

Bagaimana untuk melaksanakan kotak carian dalam vuejs?

Melaksanakan kotak carian ringkas berdasarkan Vue.js

Saya melihat latihan itu pada github, latih semula sendiri alamat asal dahulu : https://github.com/lavyun/vue-demo-search

Pengetahuan utama yang digunakan adalah sangat mudah, pengetahuan mudah tentang vuejs2.0 sudah memadai. Kod sumber menggunakan .vue untuk membina dan ES6, pembungkusan webpack dan sebagainya. Saya masih kurang berpengalaman, jadi saya akan menggunakan .js yang mudah untuk menulis dahulu.

Lihat kesannya dahulu

Ada dua komponen di sini, satu bahagian logo dan satu lagi bahagian kotak carian.

html

html sangat mudah, ia hanya merujuk kepada dua komponen.

<p id="app">
 <logo-picture></logo-picture>
 <search-panel></search-panel>
</p>

//js还要实例#app
var app = new Vue({
 el: "#app"
})

logo

Mari kita menganalisisnya dahulu, 6ed09268cbdd0015bce8dcbbdfa9bfe4 Ia perlu responsif di sini Ya, jika anda memilih ikon enjin carian yang berbeza di bawah, anda perlu menukarnya dengan sewajarnya. Jadi 19a47b44b0f1c08c9386558b1a8ea6ef. Apabila diklik pada segi tiga terbalik belakang, senarai juntai bawah914942ce123cf770f7ea92723ad87555
Kemudian terdapat kotak drop-down. Jika anda ingin mempunyai kesan peralihan, anda perlu membungkusnya dalam df2f95e65cb1e6601f8d81f97f08d83fJika anda menukar enjin carian, 77abf0f7995875e6b32aac754d904e69 digantikan dengan satu enjin carian yang sepadan. Di sini kita perlu mencipta objek Vue kosong baharu sebagai tengah, kerana kedua-dua komponen itu tidak berada dalam hubungan ibu bapa-anak.

var bus = new Vue();

//logo-picture里触发事件，并传递参数
bus.$emit("change",index);

//search-panel里监听事件是否发生
var self = this;
bus.$on('change',function(index) {
 self.flag = index;
})

Beri perhatian kepada masalah ini di sini di $on titik ke bas, jadi anda perlu menyimpannya ke panel carian rujukan.

Pembelajaran yang disyorkan: "vue. tutorial 》

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan kotak carian dalam vuejs. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!