vue 疑难杂症记录_vue渲染数据疑难杂症-程序员宅基地

技术标签: 疑难杂症  Vue  前端小技巧  

一、render 函数渲染自定义组件注意的问题

一般使用vue render函数渲染普通的html标签时,写法如下:

render: (h) => {
   return ('div', {}, '测试内容')
}

但是有时候我们需要使用render渲染自定组件这时候就不应该在自定义的组件名上加“”号了,
写法如下:

render: (h) => {
	return (ToolBarButton, {})
}

这里假设自定义组价为ToolBarButton,加上引号后,系统一直会提示组件未注册。

二、当组件需要接受用户定义的class类名时

例如有个自定义的icon组件,它有props属性需要接收真正的类名,用来选软各种各样的组件,代码如下:

<template>
  <div class="global-tool-bar">
    <Tooltip :content="buttonTip" placement="top" theme="light" transfer :delay="tipDelayTime">
      <Icon :color="iconColor" :class="{iconBarClass: true, 'tool-bar-button': !disableDefaultOffset}" @click.native="onToolBarClick" :type="iconType" :size="iconSize"  />
    </Tooltip>
  </div>
</template>

<script>
export default {
  name: 'toolbar-button',
  props: {
    buttonTip: { type: String, default: '' },
    iconBarClass: { type: String, default: '' },
    iconType: { type: String, default: '' },
    actionName: { type: String, default: 'toolButton' },
    tipDelayTime: { type: Number, default: 700 },
    iconColor: { type: String, default: '' },
    disableDefaultOffset: { type: Boolean, default: false },
    iconSize: { type: Number | String, default: '' }
  },
  methods: {
    onToolBarClick () {
      this.$emit('on-toolbar-click', this.actionName)
    }
  }
}
</script>

这里类名使用:class={iconBarClass:true}的方式传入,vue选软时会把iconBarClass当做一个字符串对应的类名直接渲染,而不是把这个变量对应值的内容进行渲染,这样导致我们的类失效。
解决办法: 提供一个计算属性,返回变量iconBarClass的值的内容作为vue真正要渲染的class,改动后如下:

<template>
  <div class="global-tool-bar">
    <Tooltip :content="buttonTip" placement="top" theme="light" transfer :delay="tipDelayTime">
      <Icon v-if="!customer" :color="iconColor" :class="customerClass" @click.native="onToolBarClick" :type="iconType" :size="iconSize"  />
      <i v-if="customer" :class="customerClass" @click.native="onToolBarClick"></i>
    </Tooltip>
  </div>
</template>

<script>
export default {
  name: 'toolbar-button',
  props: {
    buttonTip: { type: String, default: '' },
    iconBarClass: { type: String, default: '' },
    iconType: { type: String, default: '' },
    actionName: { type: String, default: 'toolButton' },
    tipDelayTime: { type: Number, default: 700 },
    iconColor: { type: String, default: '' },
    disableDefaultOffset: { type: Boolean, default: false },
    iconSize: { type: Number | String, default: '' },
    customer: { type: Boolean, default: false }
  },
  computed: {
    customerClass () {
      return [
        { 'tool-bar-button': !this.disableDefaultOffset },
        { [this.iconBarClass]: !!this.iconBarClass }
      ]
    }
  },
  methods: {
    onToolBarClick () {
      this.$emit('on-toolbar-click', this.actionName)
    }
  }
}
</script>
``
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/u011244682/article/details/91886196

智能推荐

Flutter溢出滚动_flutter 超出滚动-程序员宅基地

文章浏览阅读4.8k次。外部再加层SingleChildScrollView属性this.scrollDirection = Axis.vertical,//滚动的方向,垂直或水平this.reverse = false,// 是否反转,如果是垂直滚动的话,reverse默认为false,表示先看上面。如果reverse为true,则先看底部。this.padding,// 内边距bool primary,// 是否使用默认的controllerthis.physics,this.controller,//可以控制初_flutter 超出滚动

我的世界服务器换披风的网站,minecraft我的世界局域网换皮肤和披风-程序员宅基地

文章浏览阅读3.7k次。minecraft很多人不知道皮肤和披风怎么换,装了mod也没用,皮肤有人说必须要正版,也是胡扯。那该怎么换呢?下面是学习啦小编收集整理的minecraft我的世界局域网换皮肤和披风,希望对大家有帮助~~minecraft我的世界局域网换皮肤和披风工具/原料minecraft电脑版skinme方法/步骤1进入http://www.skinme.cc/#./mod_index?&_suid=..._minecraft披风网站

python按钮虚化_深度学习与图像处理之:人像背景虚化-程序员宅基地

文章浏览阅读457次。简单实现思路:对图像内容进行分割,提取人像对图像背景进行模糊化处理将人像和背景重新合成在这里,使用DeepLabV3模型对图像内容进行分割并提取人像,实现的代码如下:import numpy as npimport tensorflow as tfimport cv2from deeplabmodel import *def create_pascal_label_colormap():color..._python 图像处理 深度学习

burpsuite 设置https_从头开发一个BurpSuite数据收集插件-程序员宅基地

文章浏览阅读180次。一段时间没写公众号了,最近写了个 burpsuite 数据收集的插件,于是想出一篇从头编写一个 burpsuite 插件的教程。这个插件的目的收集 burpsuite 请求中的数据,如请求中的子域名、文件名、目录名、参数名等,保存到数据库,然后根据出现的次数进行排序,出现次数多的排在前面,从而强化我们的字典。插件效果演示先来看看插件的效果图:该插件会在 burp 上面新建一个标签页,用来...

c语言if函数嵌套公式例子,IF函数的嵌套使用案例-程序员宅基地

文章浏览阅读3.2k次。从Excel小白到慢慢深刻领悟函数,这一路我见证了她的成长,下面我们一起来看看她带给我们的内容吧~=====手动分割线====昨天我学习了Excel的IF函数,基础语法其实很简单,因为网上很多关于IF函数的讲解大多是用单个条件来讲解的,确实是很容易理解,但也只是单一条件下的IF函数运用。实际情况往往我们的判断条件是不止一个的,并且IF函数的魅力就在于此,面对多条件,就要考虑IF函数的的嵌套了,IF..._[任务1]使用if完成嵌套选择。说明:从键盘输入性别,用字符f'代表女,"m'代表男,若为女性则输出“欢迎女士您的光临!”,男性则要求输入年龄,判断年龄是已经成年,成年则输出“欢迎xx岁您的光临!”。。

java 对象内存_如何查看java对象所占的内存大小-程序员宅基地

文章浏览阅读421次。展开全部我们为什么想要知道对象所占对内存的大小呢?e68a843231313335323631343130323136353331333332636264 (1)做一些cache的时候,我们不可能把数据库的所有的数据都缓存到内存里面,我们要估计缓存的大小。 (2)内存泄露的时候,我们可以查看某些对象的大小来定位问题,当然还有其他的更有效的方式,比如使用MAT分析dump文件 (3)根据jvm的堆内..._代码中查看 一个对象占的heamp的大小

随便推点

00-C语言语法_00,,c-程序员宅基地

文章浏览阅读830次。C语言语法变量变量对应这内存中的一段内存。 从内存的角度看变量,变量包括:内存地址(变量首地址)、变量名、变量类型(即变量大小)、变量值等。关键字auto自动变量:是函数的参数 ,和 在函数体内定义的局部变量。函数的形参及代码块中定义的变量都属于auto变量,这是C语言中应用最广的一种变量,这类变量是栈分配的,是动态分配存储空间的。举函数形参为例,当调用该函数时,为形参分配存储空间,当函数调用结束时,系统就自动释放这些存储空间。对**代码块中定义的变量(包含函数中定义的变量),当执行到_00,,c

【数理知识】极坐标与笛卡尔坐标转换_笛卡尔转极坐标-程序员宅基地

文章浏览阅读1.7w次,点赞12次,收藏32次。极坐标与笛卡尔坐标极坐标与笛卡尔坐标笛卡尔坐标系极坐标系转换笛卡尔坐标转换为极坐标极坐标转换为笛卡尔坐标但如果 X 和 Y 是负数呢?总结极坐标与笛卡尔坐标笛卡尔坐标系极坐标系转换从一个系统转换到另一系统,我们用这个三角形:笛卡尔坐标转换为极坐标当我们知道一点的笛卡尔坐标 (x,y)(x,y)(x,y) 想转换成极坐标 (r,θ)(r,θ)(r,θ),我们需要解一个有两条已知边的直角三角形。例子: (12,5) 的极坐标是什么?用勾股定理去计算长的一边(斜边):r2=122+52r=_笛卡尔转极坐标

cfdpost导出图片_科学网—去除 cfd post 输出eps文件中的莫名其妙的点 - 姚程的博文...-程序员宅基地

文章浏览阅读557次。用cfd post 输出eps格式图片时,会莫名其妙地出现一些点,比如,原本要输出一条曲线,但是多了下面这个点。怎么办?辛亏eps文件可以编辑!!!先保留上面的那条线,输出test1.eps然后把线隐藏,再输出test2.eps然后用notepad++把两个eps文件都打开。使用compare插件,比较这两个文本。会发现,test1.eps中多出了一些命令其中有这么几行数据,是以v或者vc结尾的。..._cfdpost导出图片关闭水印

pmw.php,加速调光频率 PWM实现精准LED调光-程序员宅基地

文章浏览阅读707次。无论是经由降压、升压、降压/升压或线性稳压器驱动,连接每一个驱动电路最常见的线程就是须要控制光的输出。现今仅有很少数的应用只需要开和关的简单功能,绝大多数都需要从0~100%去微调光度。目前,针对光度控制方面,主要的两种解决方案为线性调节LED的电流(模拟调光)或在肉眼无法察觉的高频下,让驱动电流从0到目标电流值之间来回切换(数字调光)。利用脉冲宽度调变(PWM)来设定循环和工作周期可能是实现数字..._.xp pwma1wdpjppwm1ptgp7pgdppp0mpwpg邓文747778547146009977ggdppwppgg1ppp

python抢票代码_GitHub标星超12K,抢票神器大更新,支持候补-程序员宅基地

文章浏览阅读178次。掐指一算,距离国庆黄金周还有半个月的时间!你出行的车票都抢到了吗?图片来自 pexels根据国务院办公厅发布的关于 2019 年部分节假日安排的通知,国庆放假安排是:10 月 1 日至 7 日。想要十一出行的小伙伴们,想必前几天刚经历了一波抢票大战。顺便把一个 Python 抢票工具,送到了 GitHub 趋势榜第一。这个项目名很干脆,就是“12306”,目前标星超过 12K。项目发起者是一名叫文..._将配置中的 web_enable 打开,启动程序后访问当前主机地址 + 端口号 (默认 8008)

网络异常_排查Calico网络中ARP响应异常-程序员宅基地

文章浏览阅读1.4k次。一、现象部署应用时,新建的POD调度到K8S的部分计算节点后,发现ping不通pod,自然服务也不可用二、分析2.1 查看网络信息进入到有问题的节点docker_id=`docker ps | grep cluster-test| grep POD | awk '{print$1}'` && docker_pid=`docker inspect -f{{.State.Pi..._docker 自动清理导致arp异常