- switches.vue组件：上传中…]组件原则：解耦在这个组件中，将点击组件的索引传播即可methods: { switchItem(index) { this.$emit(‘switch’, index) }}高亮样式.switch-item flex: 1 padding: 8px text-align: center font-size: $font-size-medium color: $color-text-d &.active background: $color-highlight-background color: $color-text2.tab栏切换，两个滚动列表边界逻辑1.在watch中query(newVal) { //切换tab栏的时候，刷新scroll if (!newVal) { this.refreshList() }}2. methods中定义方法，刷新两个滚动组件refreshList() { setTimeout(() => { if (this.currentIndex === 0) { this.$refs.songList.refresh() } else { this.$refs.searchList.refresh() } }, 20)},3. add-song.vue和search.vue： mixin两个组件有公共方法，所以使用mixinexport const searchMixin = { data() { return { query: ‘’, refreshDelay: 120 } }, computed: { …mapGetters([ ‘searchHistory’ ]) }, methods: { onQueryChange(query) { this.query = query }, //开始滚动的时候输入框的键盘收缩，调用子组件中input，blur事件，收缩键盘 blurInput() { this.$refs.searchBox.blur() }, addQuery() { this.$refs.searchBox.setQuery(this.query) }, //保存搜索历史 saveSearch() { this.saveSearchHistory(this.query) }, …mapActions([ ‘saveSearchHistory’, ‘deleteSearchHistory’ ]) }}