$el

• this.$el 获取组件的dom
• this.$refs.button.$el 同理，这是得到ref对应的组件实例的dom(ref='button' 加在自定义组件上)

slot

• slot外侧最好有个span或者div，别使用插槽时 插槽内容文本悬空
• $slots.title //具名插槽，需要插槽有内容时显示的部分 可通过它来判断
• $slots.default //默认插槽有内容时为true

       <span class="el-alert__title" :class="[ isBoldTitle ]" v-if="title || $slots.title">
          <slot name="title">{{ title }}</slot>
        </span>

映射代码风格

• 名称全大写，好区分

  const TYPE_CLASSES_MAP = {
    'success': 'el-icon-success',
    'warning': 'el-icon-warning',
    'error': 'el-icon-error'
  };

v-bind

里面这俩都是对象，v-bind="对象"，相当于把每个属性键值对都放标签上。
   v-bind="[$props, $attrs]"

input输入时其它按键操作功能扩展

    <el-input
      ref="input"
      v-bind="[$props, $attrs]"
      @input="handleInput"
      @change="handleChange"
      @focus="handleFocus"
      @blur="handleBlur"
      @clear="handleClear"
      @keydown.up.native.prevent="highlight(highlightedIndex - 1)"
      @keydown.down.native.prevent="highlight(highlightedIndex + 1)"
      @keydown.enter.native="handleKeyEnter"
      @keydown.native.tab="close"
    >
    按 ↑ 箭头 会扩展框选中项上下切换
    按回车键 会把当前高亮项选中填充

传入变量当类名

//该prop变量有值 就当类名加上。没值，就为空
 :class="[popperClass ? popperClass : '']"

多种逻辑判断优雅写法

        let isValidData = Array.isArray(suggestions) && suggestions.length > 0;
        let isValidData = suggestions?.length > 0  //与上面等效
        return (isValidData || this.loading) && this.activated;

给多个变量赋同一值

• this.$parent.popperElm = this.popperElm = this.$el;

解构重组

      const { icon, src, alt, isImageExist, srcSet, fit } = this;

      if (isImageExist && src) {
        return <img
          src={src}
          onError={this.handleError}
          alt={alt}
          srcSet={srcSet}
          style={{ 'object-fit': fit }}/>;
      }

执行函数返回的函数(重要！！！！)

• 使用lodash时，节流需要通过执行它函数后 返回的函数才具备节流功能
• 下面throttledScrollHandler并没有在data里声明，可以直接写，相当于给当前实例加属性

    this.throttledScrollHandler = throttle(300, this.onScroll);
    this.container.addEventListener('scroll', this.throttledScrollHandler);

函数当变量来看的思想

• 默认函数

子盒子浮动，父盒子根据子盒子大小决定宽度

• 父盒子是div时，子盒子浮动是无法撑起父盒子宽度的
• el-button-group内部el-button都是浮动的，el-button-group采取下面这个方案(把父盒子变成bfc)

     display: inline-block;
     vertical-align: middle;

产生BFC的方式

• float的值不为none。
• position的值不为static或者relative。
• display的值是inline-block、table-cell、flex、table-caption或者inline-flex
• overflow的值不为visible

快捷转布尔

• !!

--computed
    clearBtnVisible() {
      if (!this.clearable || this.isDisabled || this.filtering || !this.inputHover) {
        return false;
      }

      return this.multiple ? !!this.checkedNodes.filter(node => !node.isDisabled).length
        : !!this.presentText;
    },