element源码学习笔记

element源码学习笔记
(1)方法简写

 if (!layout) {
      return null
    }
    // 如果if大括号里只有单行，可以去除大括号
    if (!layout) return null;
    // else只有单行的２时候也可以去除大括号
const a = 7; if (a > 9) console.log(1); else console.log(2); 

(2) 向数组开头添加新项，unshift()

template.children.unshift(rightWrapper);

(3)判断是否是数组Array.isArray(newVal)

if (Array.isArray(newVal)) {
              this.$parent.internalPageSize = newVal.indexOf(this.$parent.pageSize) > -1
                ? this.$parent.pageSize
                : this.pageSizes[0];
            }

(4)取父组件和子组的data,props ，方法，this.$parent

(5)动态样式:
:class=“[‘el-dialog’, { ‘is-fullscreen’: fullscreen, ‘el-dialog–center’: center }, customClass]”
解析: 该div始终有el-dialog,customClass,当fullscreen和center为true时,is-fullscreen,el-dialog–center存在

 <div
        role="dialog"
        :key="key"
        aria-modal="true"
        :aria-label="title || 'dialog'"
        :class="['el-dialog', { 'is-fullscreen': fullscreen, 'el-dialog--center': center }, customClass]"
        ref="dialog"
        :style="style">

(6)

this.$el.addEventListener('scroll', this.updatePopper), this.$el.removeEventListener('scroll', this.updatePopper);

知识点1: $el ：是 用于获取组件内 DOM（包括子组件，当前.vue组件，以及父组件）
知识点2:addEventListener:添加事件监听,removeEventListener:移除事件监听

(7)v-clickoutside=“close” 点击元素之外,触发事件
参考: 优秀博主具体讲解

(8)v-bind=“[$props, $attrs]”, 组件传值
参考:

优秀博主讲解

(9)inject