vuejs怎么实现搜索框

vuejs实现搜索框的方法：1、创建logo和搜索框部分的组件；2、新建一个空的Vue对象；3、使用“bus.$emit("change",index);”触发事件并传递参数即可。

本文操作环境：Windows7系统、vue2.9.6版，DELL G3电脑。

vuejs怎么实现搜索框？

基于Vue.js实现简单搜索框

在github上看到的练习，看个遍代码后自己再练一遍，先放原址：https://github.com/lavyun/vue-demo-search

主要用到的知识很简单，简单的vuejs2.0的知识就够了。源码用了.vue构建和ES6，用了webpack打包等等。我资历还浅，先用一个简单的.js的写。

先看效果

这里有两个组件，一个组件是logo部分的，一个是搜索框部分的。

html

html很简单，就是引用两个组件。

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

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

logo

先来分析，首先一个6ed09268cbdd0015bce8dcbbdfa9bfe4显示搜索引擎的图片，这里要响应式的，下面选择了不同的搜索引擎图标就要跟着换。所以ce79b531bd3d51fe52b9ea309b181595。后面的倒三角点击时显示下拉列表ff7b32596bbe913deeb2bf646eace494 54bdf357c58b8a65c66d7c19c8e4d114。
然后是下拉框。如果想要有过渡效果，那个就要包裹在fe9a8283300c0090a2774006bb7a80a8下拉列表差不多。
搜索的话主要是运用$http.jsonp，还有ES6的语法？回掉好像是Promise的.then()。

Vue.component('search-panel',{
 template:'\
 <p class="search-input">\
 <input v-model="search" @keyup="get($event)" @keydown.enter="searchInput()" @keydown.down="selectDown()" @keydown.up.prevent="selectUp()"/>\
 <span @click="clearInput()" class="search-reset">&times;</span>\
 <button @click="searchInput()" class="search-btn">搜一下</button>\
 <p class="search-select">\
 <transition-group tag="ul" mode="out-in">\
 <li v-for="(value,index) in myData" :class="{selectback:index==now}" :key="index" @click="searchThis" @mouseover="selectHover(index)" class="search-select-option search-select-list">\
  {{value}}\
 </li>\
 </transition-group>\
 </p>\
 </p>&#39;,
 data: function() {
 return {
 search: &#39;&#39;,
 myData: [],
 flag: 0,
 now: -1,
 logoData: [
 {
  &#39;name&#39;: "360搜索",
  searchSrc: "https://www.so.com/s?ie=utf-8&shb=1&src=360sou_newhome&q="
 },
 {
  &#39;name&#39;: "百度搜索",
  searchSrc: "https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=0&rsv_idx=1&tn=baidu&wd="
 },
 {
  &#39;name&#39;: "搜狗搜索",
  searchSrc: "https://www.sogou.com/web?query="
 }
 ]
 }
 },
 methods: {
 get: function(event) {
 if(event.keyCode == 38 || event.keyCode == 40){ //向上向下
 return ;
 }
 this.$http.jsonp(&#39;https://sug.so.360.cn/suggest?word=&#39; + this.search + &#39;&encodein=utf-8&encodeout=utf-8&#39;).then(function(res) {
 this.myData = res.data.s;

 }, function() {

 });
 },
 //清除内容
 clearInput: function() {
 this.search = &#39;&#39;;
 this.get();
 },
 //搜索
 searchInput: function() {
 alert(this.flag)
 window.open(this.logoData[this.flag].searchSrc+this.search);
 },
 //搜索的内容
 searchThis: function(index) {
 this.search = this.myData[index];
 this.searchInput();
 },
 //li hover
 selectHover: function(index) {
 this.search = this.myData[index];
 this.now = index;
 },
 //向下
 selectDown: function() {
 this.now++;
 if(this.now == this.myData.length) {
 this.now = 0;
 }
 this.search = this.myData[this.now];
 },
 //向上
 selectUp: function() {
 this.now--;
 if(this.now == -1) {
 this.now = this.myData.length - 1;
 }
 this.search = this.myData[this.now];
 }
 },
 created: function() { //通信
 var self = this;
 bus.$on(&#39;change&#39;,function(index) {
 self.flag = index;
 })
 }
})

两个兄弟组件通信的问题

fd098b03a0046905b4f34a14f2cba3c4换了搜索引擎的话，04a43090e6cbf1462a77fdb864c1f813要换成相应的搜索引擎。这里要新建一个空的Vue对象做中间，因为两个组件不是父子关系。

var bus = new Vue();

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

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

这里要注意this问题，$on里this指向bus，所以要保存this才能引用search-panel.

推荐学习：《vue教程》

以上是vuejs怎么实现搜索框的详细内容。更多信息请关注PHP中文网其他相关文章！