近年來，Vue框架被越來越多的人所使用，Vue的一個重要功能就是它能夠快捷的運用組件化和復用的思想，使我們能夠在編寫過程中更有效的使用我們的時間。Vue提供了很多自帶的組件，比如下拉選擇框，在很多選擇數(shù)據(jù)篩選的場景下，它都是非常實用的。但是，在實際的項目中，我們往往會需要一種能夠專門適配我們業(yè)務邏輯的下拉框組件。這種時候，我們就需要借助Vue的一些特性，進行我們自己的篩選框封裝，來滿足我們的需求。

Vue的特性之一就是組件化，我們可以將所有的可復用組件封裝，用到需要的地方，輕松的實現(xiàn)復用。

//template代碼：

可以看到，我們的篩選框組件使用了Vue的模板語法，生成了一個下拉選擇框。這個下拉選擇框內的選項，是從options數(shù)組中遍歷獲取的，您可以根據(jù)具體業(yè)務需求，自定義選項的label和value。

除了模板語法之外，我們還需要在對數(shù)據(jù)進行監(jiān)聽的時候自定義一個監(jiān)聽事件。通過Vue的watch方法，我們可以在數(shù)據(jù)發(fā)生改變的時候，及時的對UI做出響應。

//methods代碼：
methods: {
watchForDataChanges: function() {
this.$watch('selectedValue', function(){
this.$emit('valueChanged', this.selectedValue);
});
}
},

可以看到，watchForDataChanges函數(shù)是在Vue的生命周期created函數(shù)中被調用的，其作用就是對selectedValue進行監(jiān)聽。當觸發(fā)selectedValue的onChange事件之后，$emit將事件傳遞出去，具體的調用邏輯在父組件中去實現(xiàn)。

除了上文提到的watch函數(shù)外，我們也需要添加一個清空選項的功能。通過在mounted函數(shù)中調用reset方法，我們可以方便的隨時進行篩選框的重置操作。

//methods代碼：
reset: function() {
this.selectedValue = '';
}

最后，我們在篩選框的使用的地方，你可以實現(xiàn)如下代碼：

//template代碼：

我們可以看到，在template中添加了按鈕組件，方便用戶隨時通過Reset操作進行篩選框的重置。同時，通過我們 Vue的封裝，篩選框可以在多個Vue組件之間進行輕松的復用，極大的提高了我們的編碼效率。