模糊匹配功能在下拉菜單的組件中用的非常多，於是打算寫幾個demo看看細節上是如何實現的。
一、最簡單的模糊匹配：計算屬性
1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 </head> 9 <body> 10 <div id="app"> 11 <input type="text" v-model="message"> 12 <ul> 13 <li v-for="(option, index) in matchedOptions" :key="index">{{ option }}</li> 14 </ul> 15 </div> 16 <script src="./vue.js"></script> 17 <script> 18 new Vue({ 19 el: '#app', 20 data: { 21 message: '', 22 options: ['html', 'css', 'javascript'] 23 }, 24 computed: { 25 matchedOptions() { 26 if (this.message !== '') { 27 return this.options.filter(option => option.includes(this.message)) 28 } 29 return this.options 30 } 31 } 32 }) 33 </script> 34 </body> 35 </html>
在上面的例子中，計算屬性matchedOptions會在文本框內容message變化時篩選options里的數據，效果圖如下所示：
二、使用作用域插槽實現
使用插槽主要是為了使該功能組件化：在select組件中插入option，然后option通過作用域插槽從select中獲取文本值：
1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 </head> 9 <body> 10 <div id="app"> 11 <my-select> 12 <template #default="{ message }"> 13 <ul> 14 <li v-for="(option, index) in options" :key="index" v-show="option.includes(message)">{{ option }}</li> 15 </ul> 16 </template> 17 </my-select> 18 </div> 19 <script src="./vue.js"></script> 20 <script> 21 Vue.component('my-select', { 22 template: ` 23 <div class="my-select"> 24 <input type="text" v-model="message"> 25 <slot :message="message"></slot> 26 </div> 27 `, 28 data() { 29 return { 30 message: '' 31 } 32 } 33 }) 34 new Vue({ 35 el: '#app', 36 data: { 37 options: ['html', 'css', 'javascript'] 38 } 39 }) 40 </script> 41 </body> 42 </html>
全局注冊了my-select組件后，可以刪除app里的message數據，使用v-show來控制選項的顯示，運行效果和計算屬性方式相同。缺點就是無法單文件化（剛學vue沒多久，不知道怎么在單文件里使用作用域插槽，試過直接把template里的東西封裝成my-option好像並不管用）
三、混入廣播和派發方法在獨立組件中實現模糊匹配
首先需要一個emitter文件：
1 /** 2 * 子組件廣播事件 3 * @param {string} componentName 子組件名 4 * @param {string} eventName 事件名 5 * @param {...any} params 事件參數 6 */ 7 function _broadcast(componentName, eventName, ...params) { 8 this.$children.forEach(child => { 9 if (child.$options.name === componentName) { 10 child.$emit(eventName, ...params) 11 } 12 _broadcast.call(child, componentName, eventName, ...params) 13 }) 14 } 15 16 /** 17 * 父組件派發事件 18 * @param {string} componentName 父組件名 19 * @param {string} eventName 事件名 20 * @param {...any} params 事件參數 21 */ 22 function _dispatch(componentName, eventName, ...params) { 23 if (this.$parent) { 24 if (this.$parent.$options.name === componentName) { 25 this.$parent.$emit(eventName, ...params) 26 } 27 _dispatch.call(this.$parent, componentName, eventName, ...params) 28 } 29 } 30 31 /** 32 * mixin 33 */ 34 export default { 35 methods: { 36 broadcast(componentName, eventName, ...params) { 37 _broadcast.call(this, componentName, eventName, ...params) 38 }, 39 dispatch(componentName, eventName, ...params) { 40 _dispatch.call(this, componentName, eventName, ...params) 41 } 42 } 43 }
注意，這里的$children和$parent都是指具有dom父子關系的vue組件。
最后，通過設置查詢條件來控制子組件的顯示與隱藏即可實現實時模糊搜索。