搜索到了内容，点击内容。把历史记录存起来。存到vuex里面。
image.png
list-card的点击事件里面，发送时间到父组件。
image.png
在homeSearch组件内接收事件
image.png
定义属性value，表示当前查询的关键字。
image.png
image.png

image.png
image.png



image.png
输入node关键字查询
image.png
点击打开详情
image.png
把关键字node删掉
image.pngimage.png
删除数据后
image.png

搜索历史标签点击事件

点击搜索历史的标签，搜索框获取到值，并进行搜索。
image.png
双向绑定一个value值。
image.png
双向绑定的value就是我们在属性里面定义的value值
image.pngimage.png
在navbar组件内，定义一个value，可以是String类型也可以是Number类型的，默认为空字符串。
image.png
watch监听value
image.png
最终的是这里的this.$emit给父节点返回了一个input事件。当前的值传递给了父组件。
image.png
父组件这里接收了子组件传递过来的事件。复制给了父节点的value
image.png
传入一个node
image.png
image.png
image.pngimage.png
删除搜索的关键字
image.png

点击标签，绑定事件

image.png

image.png
需要把item传递到事件里
image.png
赋值。
image.png
同时完成一个搜索的操作
image.png
点击
image.png
点击了node进行了搜索，
image.png
input还没有给赋值
image.png
这里的watch单词拼错了。修正后↓
image.png

image.png
image.png

如果没有搜索到内容，添加显示无内容

image.png

image.png
image.png

添加loading

image.png

image.png
输入关键字下面显示正在加载中。
image.png
通过条件判断，是否要显示。
image.png
声明loading的属性
image.png
image.png
请求完数据变成false
image.png
出现异常也隐藏loading
image.png
改成v-if的判断方式
image.png
并且loading为false 的时候
image.png
image.png

image.png

image.png

结束