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

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

此时打印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>

如果使用jsx那么绑定如下:
<!-- <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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/3618.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

C++入门学习3-指针与字符数组,函数,指针数组

c入门学习3char型指针的使用p*p*p与p与[整型指针指向整型数组]的区别指针与函数的使用指向函数的指针空指针调用函数从函数中返回指针一维数组和二维数组的类比CHAR型指针数组关于&achar型指针的使用 char型指针可以直接指向一个字符串&#xff0c;如下 char s[]{a,b,c};…

YOLO V7源码解析

1.命令行参数介绍 YOLO v7参数与YOLO v5差不多&#xff0c;我就直接将YOLO v5命令行参数搬过来了&#xff0c;偷个懒 --weights:初始权重--cfg:模型配置文件--data:数据配置文件--hyp:学习率等超参数文件--epochs:迭代次数-imgsz&#xff1a;图像大小--rect&#xff1a;长方…

多目标蜉蝣优化算法(MOMA)附Matlab代码

✅作者简介&#xff1a;热爱科研的Matlab仿真开发者&#xff0c;修心和技术同步精进&#xff0c;matlab项目合作可私信。 &#x1f34e;个人主页&#xff1a;Matlab科研工作室 &#x1f34a;个人信条&#xff1a;格物致知。 更多Matlab仿真内容点击&#x1f447; 智能优化算法 …

统计信号处理基础 习题解答6-6

题目 在本题中&#xff0c;我们扩展标量BLUE的结果。假定 其中θ 是待估计的未知参数&#xff0c;β 是已知常数&#xff0c;数据矢量x 的协方差矩阵是C 。在本题我们定义修正的线性估计量为 证明BLUE为&#xff1a; 另外求最小方差。 解答&#xff1a; 首先确保线性估计量是…

TFT-LCD显示中英文

TFT-LCD显示中英文 在前面编写了屏幕显示ASCII字符和字符串后&#xff0c;本次实现屏幕显示中文字符和中文字符串 中文字符取模 阴码&#xff0c;逐行式&#xff0c;逆向&#xff0c;十六进制数&#xff0c;C51格式&#xff0c; 输入要显示的中文字符&#xff0c;字体选择宋…

【数据结构】搜索二叉树(C++实现)

目录 一、二叉搜索树的概念 二、二叉搜索树的实现 2.1 节点的定义及构造 2.2 树的结构及功能展示 2.3 树的 Insert 2.4 树的中序遍历 2.4 树的 Find 2.5 树的 Erase 2.6 拷贝构造、赋值运算符重载、析构函数 三、递归实现树的增删查 3.1 递归实现 FindR 3.2 递归实…

Vue | Vue.js Composition API(二)

&#x1f5a5;️ Vue.js专栏&#xff1a;Vue.js 初级知识 Composition API(二) &#x1f9d1;‍&#x1f4bc; 个人简介&#xff1a;一个不甘平庸的平凡人&#x1f36c; ✨ 个人主页&#xff1a;CoderHing的个人主页 &#x1f340; 格言: ☀️ 路漫漫其修远兮,吾将上下而求索☀…

嘿,朋友,其实 CSS 动画超简单的 - 时间函数篇(贝塞尔曲线、steps,看完还不懂算我输)

分配内存 - new 官方定义&#xff1a;new是一个分配内存的内置函数&#xff0c;第一个参数是类型&#xff0c;而不是值&#xff0c;返回的值是指向该类型新分配的零值的指针。 func new(Type) *Type 我们平常在使用指针的时候是需要分配内存空间的&#xff0c;未分配内存空间…

Java自定义注解

目录 一、什么是自定义注解 1&#xff09;Java注解简介 2&#xff09;Java注解分类 JDK基本注解 JDK元注解 自定义注解 如何自定义注解&#xff1f; 二、自定义注解 1&#xff09;获取类上注解值 2&#xff09;获取类属性上的注解属性值 3&#xff09;获取方法上的注…

WireShark 常用协议分析

WireShark 常用协议分析 1.3 实战&#xff1a;使用 WireShark 对常用协议抓包并分析原理 协议分析的时候 我们 关闭混淆模式&#xff0c; 避免一些干扰的数据包存在。 1.3.1 常用协议分析 - ARP 协议 地址解析协议 &#xff08;英语&#xff1a;Address Resolution Protocol&…

从内核角度看网络包发送流程

一、前置知识 1、RingBuffer结构详解 关于RingBuffer网上有很多说法&#xff0c;有的人说RingBuffer是系统启动时就预先申请好的一个环形数组&#xff0c;有的人说RingBuffer是在接收或发送数据时才动态申请的一个环形数组&#xff0c;那么到底RingBuffer的结构是怎么样的呢&…

《吉师作业》(2)之迟来的答案

前言 &#x1f340;作者简介&#xff1a;吉师散养学生&#xff0c;为挣钱努力拼搏的一名小学生。 &#x1f341;个人主页&#xff1a;吉师职业混子的博客_CSDN博客-python学习,HTML学习,清览题库--C语言程序设计第五版编程题解析领域博主 &#x1fad2;文章目的&#xff1a;我不…

初识C++(二)

简述 &#xff1a;本篇就缺省参数 和 函数重载 方面进行初步学习 &#xff0c;对比C语言学习C这两个语法&#xff0c;从而感受C在此方面对C语言进行的补充。 目录 缺省参数 什么是缺省参数 缺省参数的分类 缺省参数的应用 函数重载 什么是函数重载 函数重载的三种情况 支…

【JavaSE】函数or方法?方法的重载讲解

文章目录什么是方法如何定义方法方法的调用过程形参与实参的关系方法的重载为什么要重载重载的概念方法签名递归什么是方法 在C语言的学习中我们学习到了一个概念叫做函数&#xff0c;那么在Java的语法中有没有类似函数的东西的&#xff0c;答案是有的&#xff0c;但是在Java的…

strimzi实战之一:简介和准备

欢迎访问我的GitHub 这里分类和汇总了欣宸的全部原创(含配套源码)&#xff1a;https://github.com/zq2599/blog_demos 关于strimzi strimzi是一个开源项目&#xff0c;已加入了CNCF&#xff0c;官网地址&#xff1a;https://strimzi.io/借助strimzi&#xff0c;既能快速部署ka…

【生日快乐】搜索技术【深度优先搜索】 - 回溯法

搜索技术【深度优先搜索】 - 回溯法 回溯法是一种选优搜索法&#xff0c;按照选优条件深度优先搜索&#xff0c;以达到目标。当搜索到某一步时&#xff0c;发现原先的选择并不是最优或达不到目标&#xff0c;就退回一步重新选择&#xff0c;这种走不通就退回再走的技术被称为回…

如何用 Elasticsearch 实现 Word、PDF,TXT 文件的全文内容检索?

简单介绍一下需求 能支持文件的上传&#xff0c;下载 要能根据关键字&#xff0c;搜索出文件&#xff0c;要求要能搜索到文件里的文字&#xff0c;文件类型要支持 word&#xff0c;pdf&#xff0c;txt 文件上传&#xff0c;下载比较简单&#xff0c;要能检索到文件里的文字&am…

2022-ISCTF-部分MISC和PWN

misc 两层编码 第一层 sha256掩码爆破 第二层 base64解码找到key import string,sys from hashlib import sha256 from multiprocessing import Process from Crypto.Util.number import * from pwn import * import base64 from primefac import * context(log_leveldebug)…

【STL】容器 - set和map的使用

目录 前言 一.键值对 1.在SGI - STL中对键值对的定义: 2.make_pair 二.set 1.set的概念与注意事项 2.set的使用(常用接口) <1>.构造函数 <2>.迭代器与范围for <3>.插入和查找 <4>.删除erase <5>.计数count 三.map 1.map的概念与注…

洛谷千题详解 | P1012 [NOIP1998 提高组] 拼数【C++、Java语言】

博主主页&#xff1a;Yu仙笙 专栏地址&#xff1a;洛谷千题详解 目录 题目描述 输入格式 输出格式 输入输出样例 解析&#xff1a; C源码&#xff1a; C源码2&#xff1a; C源码3&#xff1a; Java源码&#xff1a; ---------------------------------------------------------…