element-ui中获取el-divider的组件的ref时为空

element-ui中的el-divider组件是函数式组件,所以当我尝试获取其ref时总是获取不到,因为函数式组件没有this.
![在这里插入图片描述](https://img-blog.csdnimg.cn/496711bf5c2a4dd1bee168e4e2d638d4.png)
1
2

此时打印this.$refs,控制台输出:

没有h2,翻看el-divider源码发现是函数式组件.函数式组件没有this,在渲染函数render(h,context)中,其上下文对象为context,组件需要的一切都是通过 context 参数传递，它是一个包括如下字段的对象：

• props：提供所有 prop 的对象
• children：VNode 子节点的数组
• slots：一个函数，返回了包含所有插槽的对象
• scopedSlots：(2.6.0+) 一个暴露传入的作用域插槽的对象。也以函数形式暴露普通插槽。
• data：传递给组件的整个数据对象，作为 createElement 的第二个参数传入组件
• parent：对父组件的引用
• listeners：(2.3.0+) 一个包含了所有父组件为当前组件注册的事件监听器的对象。这是 data.on 的一个别名。
• injections：(2.3.0+) 如果使用了 inject 选项，则该对象包含了应当被注入的 property。
  如果要透传attrbute和事件,则要从data.attrs和context.listeners中绑定

// functionnal 表示是函数式组件
<template functional>
  <div
    v-bind="data.attrs"
    v-on="listeners"
    :class="[data.staticClass, 'el-divider', `el-divider--${props.direction}`]"
  >
    <div
      v-if="slots().default && props.direction !== 'vertical'"
      :class="['el-divider__text', `is-${props.contentPosition}`]"
     >
      <slot />
    </div>
  </div>
</template>

<script>
export default {
  name: 'ElDivider',
  props: {
    direction: {
      type: String,
      default: 'horizontal',
      validator(val) {
        return ['horizontal', 'vertical'].indexOf(val) !== -1;
      }
    },
    contentPosition: {
      type: String,
      default: 'center',
      validator(val) {
        return ['left', 'center', 'right'].indexOf(val) !== -1;
      }
    }
  }
};

</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

如果使用jsx那么绑定如下:
1

<!-- <template functional>
  <div
    v-bind="data.attrs"
    v-on="listeners"
    :class="[data.staticClass, 'el-divider', `el-divider--${props.direction}`]"
  >
    <div
      v-if="slots().default && props.direction !== 'vertical'"
      :class="['el-divider__text', `is-${props.contentPosition}`]"
    >
      <slot />
    </div>
  </div>
</template> -->

<script>
export default {
  name: "ElDivider",
  functional: true, //要设置functionnal:true,表明是函数式组件
  props: {
    direction: {
      type: String,
      default: "horizontal",
      validator(val) {
        return ["horizontal", "vertical"].indexOf(val) !== -1
      }
    },
    contentPosition: {
      type: String,
      default: "center",
      validator(val) {
        return ["left", "center", "right"].indexOf(val) !== -1
      }
    }
  },
  render(h, context) {
    const { props, data, listeners, slots } = context

    const { attrs } = data

    function renderChildren() {
      if (slots().default && props.direction !== "vertical") {
        return (
          <div class={["el-divider__text", `is-${props.contentPosition}`]}>
            {slots().default}
          </div>
        )
      }
    }

    return (
      <div
        {...{ attrs }} //批量绑定属性 attrs
        on={{ ...listeners }} // jsx 批量绑定事件 on
        class={[
          data.staticClass,
          "el-divider",
          `el-divider--${props.direction}`
        ]}
      >
        {renderChildren()}
      </div>
    )
  }
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67