跟随Element学习Vue小技巧(28)——Tree

七秒记忆的鱼
1,034 阅读5分钟
❝

现在就想要放弃

未免太早了吧

❞

前言

那天，幼儿园举办儿童植树节绘画比赛，我在黑板上写了个大大的“树”字，让小朋友们自由发挥
第二天一早，孩子们就把自己的绘画作品交上来了，我看到一幅画非常惊叹，树干是黄色的，树上结的全是金光闪闪的果子，创作新颖，颜色独特

  • 小强真棒，你能告诉老师这上面结的是什么果子，这是一棵什么树吗？
  • 树上结的是铜钱和金元宝，这是爸爸昨天买彩票时教我画的摇钱树

摇钱树，只要轻轻一摇，就会飘下来铜钱和金元宝 光是想想，就觉得美滋滋，$_$
你也想要这样的树吗?
今天就送你一颗，拿稳咯，可是有些重量的

1 TreeNode

事件传参

有一个男孩子追的一个女孩子很长时间，也为女孩子做了很多事情。
有一天女孩子递给男孩子一张纸条，上面写着：「If you don't leave me, we will die together」

由于男孩子的英语不怎么好，于是就去问他的室友，这句话什么意思。 他室友说，意思就是：「如果你不离开我，我就跟你同归于尽」
吓得男孩子再也不敢去找那个女孩子。

多年之后，女孩子婚礼，男孩子也去了，惊奇的就是新郎就是他当年的室友。

再后来，学习英语机会也多了，男孩回想起女孩子写给他的那句英语，恍然大悟，原来女孩想表达的是：「你若不离不弃，我必生死相依」 消息传过来，传过去，意思就变了！
但愿你的人生没有遗憾 ^^

代码片段

<div
  class="el-tree-node"
  @click.stop="handleClick"
  @contextmenu="($event) => this.handleContextMenu($event)"
  ...
  >
   ...
</div>

技巧解析

❝

@contextmenu,默认传参，event
你室友告诉你，传递了一个参数，
$event, 有没有感觉有问题？
如果真这么说，你必定交了一个好室友

直接执行，handle，接收默认参数
函数执行，handle($event, index), 接收额外参数
默认有多个参数呢？有妙招
handle(arguments, index)

自定义事件额外参数 传送门

❞

组件递归

从前有座山
山里有座庙
庙里有个老和尚
老和尚给小和尚讲故事:
从前有座山...

代码片段

<template>
  <div
    class="el-tree-node"
  >
    <el-collapse-transition>
      <div
        class="el-tree-node__children"
        v-if="!renderAfterExpand || childNodeRendered"
        v-show="expanded"
        role="group"
        :aria-expanded="expanded"
      >
        <el-tree-node
          :render-content="renderContent"
          v-for="child in node.childNodes"
          :render-after-expand="renderAfterExpand"
          :show-checkbox="showCheckbox"
          :key="getNodeKey(child)"
          :node="child"
          @node-expand="handleChildNodeExpand">
        </el-tree-node>
      </div>
    </el-collapse-transition>
  </div>
</template>

技巧解析

❝

组件名叫，ElTreeNode
ElTreeNode，里面又有一个ElTreeNode
子子孙孙，无穷尽也！！
原来组件名也是挺重要的 Vue和递归组件 传送门

❞

2 util

属性定义

定！
d=====(￣▽￣*)b
别动！！
糟糕，还是晚了一步，潘多拉盒子已被打开
快去请Capital 

export const markNodeData = function(node, data) {
  if (!data || data[NODE_KEY]) return;
  Object.defineProperty(data, NODE_KEY, {
    value: node.id,
    enumerable: false,
    configurable: false,
    writable: false
  });
};

技巧解析

❝

还记得那个乱化妆的小女孩吗？
妈妈是怎么做的呢？加了锁，freeze
那么怎么才能freeze呢？
答案就在defineProperty里
value表示值
enumerable表示不可枚举
configurable表示不可删除
writable表示不可更改
只可远观，不可亵渎！

Object.defineProperty 传送门

❞

组件查找

今天下班，不小心出了点事故，警察叔叔拿起我打电话，要帮我打电话给男友
打开通讯录，输了男友，结果。。

  • 北京男友
  • 初恋男友
  • 电影男友
  • 旅游男友
  • ...
  • 前男友
  • 现男友

找了好久，终于找到了保险男友 警察叔叔看我的那眼神，我这辈子也忘不了 -_- -_-

代码片段

export const findNearestComponent = (element, componentName) => {
  let target = element;
  while (target && target.tagName !== 'BODY') {
    if (target.__vue__ && target.__vue__.$options.name === componentName) {
      return target.__vue__;
    }
    target = target.parentNode;
  }
  return null;
};

技巧解析

❝

怎么找到组件呢？
名字——refs
父子——$parent-$children
今天再教你一招
DOM——el.__vue__

❞



「既然怎么呼唤也没有回应」 「那我也不会开口了」

参考链接

往期回顾

avatar
文章
阅读
粉丝