1.點擊組件外的其他位置或者其他組件，當前打開的彈窗關閉

? 這個問題發生的情境是這樣：在父組件中引用了很多子組件（有單個的組件，還有由孫組件循環生成的子組件），子組件會有點擊出現的菜單欄。如果點擊其中一個子/孫組件，使其出現下拉菜單，那么其他已打開的下拉菜單自動收起；點擊非出現下拉菜單的位置，已展開的菜單也要自動收起。

解決方案：在父組件的包裹元素上加一個函數，引用子組件的時候記得起名字（ref），子組件可以利用這個函數給父組件通信，告訴父組件點我的時候關閉其他。代碼示意如下：

子組件：

<sonA
    ref="sonA"
    @closeOtherMenu = "closeOtherMenu($event)">
</sonA>

closeOtherMenu(value) {
	this.$emit('closeOtherMenu', value);
},

父組件：

<template>
    <div class="father" @click="closeMenu">
    	<sonA ref='firstSon'></sonA>
    	<sonB ref='secondSon'></sonB>
    </div>
</template>

closeMenu() {
    if (this.$refs.firstSon) {
    	this.$refs.firstSon.closeMenu();
    }
    if (this.$refs.secondSon) {
    	this.$refs.secondSon.closeMenu();
    }
},

2. 監聽器剛打開是不會觸發的，需要執行這個事件

? 我們監聽dom事件記得 最開始只是生成了這個監聽事件，但是并沒有觸發，直到出現監聽的事件（resize）才回去執行這個函數，所以想要一開始就執行一次的話，就直接執行就好了。當時不知道為什么腦子卡住了，試了很多 包括load、pageshow，都不行，剛進入頁面沒有執行，還多開了一個監聽器，后面前輩告訴我 監聽只是開了 要觸發這個事件才執行，想一開始就用直接執行一次就好了。我當時就在想，我在干什么 好蠢。。。怎么腦子就不轉了

? 還有一定要記得關監聽器哦！！！

mounted() {
	this.getSize();
	window.addEventListener('resize', this.getSize, true)
},
destroyed() {
	window.removeEventListener('resize', this.getSize, true)
}

3. 父組件掛載傳給子組件的數據子組件掛載的時候未獲取到

? 情境：同樣是上面的問題，我想在父組件掛載的時候獲取到尺寸，然后平分給子組件，設置子組件的寬高。但是 我在父組件打印確實是獲取到了，在子組件打印是個空值。

? 解決：父組件引用子組件的時候用v-if判斷，不要用v-show，獲取到的數據是否存在，存在才渲染，就可以了。

4. el-tooltip提示文字，變量和字符串一起使用

? 只有字符串

<el-tooltip effect="dark" content="more" placement="top">
     <div class="more-button" @click.stop="showButtonMenu(index)"></div>
</el-tooltip>

? 字符串和變量，用插槽 slot=‘content’

<el-tooltip class="trans-item" effect="dark" placement="bottom" :open-delay="500">
     <div slot="content">{{restTime}} minutes later</div>
</el-tooltip>

5. sticky定位的元素可以遮蓋fixed定位的元素

? 情境：頁面有個導航欄是絕對定位的，導航欄下邊有個粘性定位的元素展示當前所處的位置，當頁面向下滾動時，粘性定位的元素擋住了絕對定位的元素

原因：sticky屬性僅在以下幾個條件都滿足時有效:

• 父元素不能overflow:hidden或者overflow:auto屬性，或者body height:100%
• 必須指定top/bottom/left/right4個值之一，否則只會處于相對定位
• 父元素的高度不能低于sticky元素的高度

解決：我就是設置了overflow:hidden; 去掉就好了。這個父元素是指的所有直系父元素！所以不能光看父親，還要看爺及以上

6. 過濾器的使用

好久沒用過過濾器，再次用到filter都忘光了。寫了兩種用法

1. 渲染使用

import Vue from 'vue'
Vue.filter('filterName', function (value) {
    return ;
});

//使用，上述內容寫在了filter.js文件里，所以要引入，然后直接在渲染的時候使用
import "../utils/filter";

<div>{{item.data | filterName}}</div>

2. 函數內使用

useFilter(){
	this.currentData = (this.$options.filters['filterName'](data);
},

7. 輸入框input光標距離輸入框左邊間距設置

text-indent:10px

還有就是input輸入框改focus樣式，border變色不生效，是因為改錯了，要改outline屬性才對。

8. 數組過濾，獲取兩數組中 共有的 和 不包含的項

//數組A
let arrA = ['1111','2222','333','4444','5555']
// 數組B
let arrB= ['aaa','bbb','4444','5555','dddd','eeee','ffff','yyyy','mmmm']
過濾B數組中不包含A數組的項
let differentArr = arrB.filter(item => arrA.indexOf(item) > -1)
// differentArr =['aaa','bbb','dddd','eeee','ffff','yyyy','mmmm']
過濾B數組中包含A數組的項
let commonArr = arrB.filter(item => arrA.indexOf(item) != -1)
// commonArr =['4444','5555']

應用：找出B數組中id等于A數組的項

this.containArr = arrB.filter(item => this.arrA.indexOf(item.id) !== -1)