我遇到的問題：
我的搜索框在父頁面，靜態數據都在子頁面。怎么實現模糊查詢數據？
昨天的嘗試：先把搜索的內容數據存到session里，然后從session里拿，
結果：存是存進去了，卻拿不到。應該也是可以拿到的，但是我不會。。。。
今天先學習一下組件通信的知識，再來解決這個問題。
下面來記一下學習筆記：
1.組件通信：組件與組件之間的數據傳遞
1.1組件通信定義
組件之間的數據是獨立的，一個組件無法直接訪問其他組件的數據。如果在一個
組件中想使用其他組件的數據，可以用組件通信方案來解決這個問題。
1.2組件之間關系
父子關系：直接包裹的關系。用props和$emit傳遞數據
非父子關系：各自獨立，沒有任何關系。用provide&inject 傳遞或者用evenbus傳遞。
我遇到的問題是父子關系之間的傳遞，先針對性學習這塊兒內容，然后活學活用把我遇到的問題解決再說。
2.父子組件通信如何實現？
2.1 父組件你給過props把數據傳給子組
（1）父組件中定義一個屬性iput4,并且給組件標簽，以添加屬性的方式來傳值
<template><div>我是父組件<Index :input4="input4"> 我是子組件</Index></div>
</template><Script>//引入子組件import Index from "@/views/front/Index.vue";export default {data(){return {input4:''}},front:{Idenx}}</Script>
（1）子組件中，使用props定義需要接收的數據
export default {props:['input4'],}
2.2子組件利用$emit 通知父組件修改更新
3.使用router-view組件往子頁面傳數據
可以給父組件中router-view設置參數屬性，子組件使用props接收參數。
**第一步：**父組件定義屬性。本功能想傳輸的屬性是用戶在搜索框輸入的數據input4。因此要用v-model綁定獲取這個輸入框的內容。
父組件的搜索框樣式代碼：
注意：v-model綁定輸入框的內容input4。
<el-input placeholder="請輸入內容" type="text" v-model="input4"><i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input>
**第二步：**父組件data中定義屬性。
data () {return {input4:''}},
第三步： 子組件中使用props接收這個屬性
export default {props:['input4'],
}
**第四步：**父組件中綁定要傳的參數
<div class="main-body"><router-view v-bind:input4="input4" />//:input4是父組件的屬性，input4是子組件的屬性。這里的屬性一定要各自的組件定義的屬性保持一致。</div>
**第五步：**渲染使用數據
1.在html直接渲染方式
<p> {{input4}}</p>
搞定！！！！！！
搜索框的數據傳過去了，那么怎么實現模糊搜索呢？
如何使用vue實現模糊搜索（純前端）？
因為搜索不能刷新頁面，而是實時響應的根據搜索內容展示數據，這里要在computed中定義計算函數。
computed 是 Vue.js 中的一個屬性，用于根據其他屬性或狀態計算出一個新的屬性值。計算屬性是基于響應式的，當其依賴的屬性或狀態發生變化時，它會自動更新。這使得計算屬性非常適合用于處理復雜的邏輯或需要根據其他屬性或狀態進行計算的情況。
咱們的需求是要根據input4的變化，展示的數據也發生變化，因此非常符合計算屬性。
在input4從父組件傳過來之后，
第一步：
在computed定義新屬性search。返回值把分頁處理過的dataList。
computed:{search(){console.log(888)let filter = this.articles.filter(item => item.title.includes(this.input4));this.total = filter.lengthlet list = splitList(filter, 9)this.dataList = list[this.pageNum - 1]return this.dataList}},
**第二步：**data里需要定義的屬性
articles: [{id:1,title: '基于 Springboot+Vue+Bootstrap的電影票訂票購票系統源碼，可用于畢業設計、課程設計、練手學習', img: require('@/assets/imgs/dianyingpiao-3.jpg'), route:'/articleDetail', tabs:['Springboot2', 'Vue2', '不分離','BootStrap','票務系統','有文檔']},{id:2,title: '基于 Springboot+Vue+Bootstrap的在線文件管理系統源碼，可用于畢業設計、課程設計、練手學習', img: require('@/assets/imgs/wenjian-2.png'), route:'/WenjianDetail',tabs:['Springboot2', 'Vue2', '不分離', 'BootStrap', '工具類','有文檔']},],tabs: ['Springboot2', 'Springboot3', 'SSM', 'Vue2', 'Vue3', '分離', '小程序', 'Bootstrap','小程序', '購物系統', '企業系統', '票務系統', '校園系統', '工具類','Element-UI', '不分離', '有文檔', 'JSP', '博客論壇',],pageNum: 1,dataList: [],total: null,
第三步：
methods里面寫一個點擊頁面跳轉的方法
methods: {handleCurrentChange(pageNum) {this.pageNum = pageNum;},}**第四步：**HTML中渲染數據
因為search是數組，里面存的是鍵值對對象，因此要循環獲取里面的數據
<el-col :span="8" v-for="item in search" :key="item.id">
