Vue render 函数中使用this

亦凉 2023-06-08 04:58 7阅读 0赞

1.在render中直接使用this,on里面click函数不是箭头函数

使用this需要在父级将this保存起来才能使用

render: (h, params) => {
                const { row } = params
                let _this = this
                return h('div', {
                  class: {
                    picture: true
                  },
                  style: {
                    backgroundImage: `url(${row.picture})`
                  },
                  on: {
                    click () {
                      if (!row.picture) {
                        return
                      }
                      _this.previewUrl = row.picture
                      _this.showPreview = true
                    }
                  }
                })
    }

2.在render的click函数中使用箭头函数可以直接使用this访问vue实例

render: (h, params) => {
                const { row } = params
                return h('div', {
                  class: {
                    picture: true
                  },
                  style: {
                    backgroundImage: `url(${row.picture})`
                  },
                  on: {
                    click: () => {
                      if (!row.picture) {
                        return
                      }
                      this.previewUrl = row.picture
                      this.showPreview = true
                    }
                  }
                })
              }

发表评论取消回复

表情：

评论列表（有 0 条评论，7人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue render函数怎样使用

一般来说，vue提供了template，让我们写页面的时候非常方便 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text

痛定思痛。/ 2023年06月16日 10:41/ 0 赞/ 12 阅读

相关 Vue render 函数中使用this

1.在render中直接使用this,on里面click函数不是箭头函数使用this需要在父级将this保存起来才能使用 render: (h, params)

亦凉/ 2023年06月08日 04:58/ 0 赞/ 8 阅读

相关 vue 的 render 函数

import Vue from 'vue' import App from './App.vue' import store from "@/store

左手的ㄟ右手/ 2022年12月25日 11:50/ 0 赞/ 123 阅读

相关 vue render中使用 class

梦开始：初代代码如下： // template { title: "操作", ali

àì夳堔傛蜴生んèń/ 2022年11月18日 10:54/ 0 赞/ 241 阅读

相关详解在vue项目中使用render函数

https://forum.vuejs.org/t/render-new-vue/16084/5 https://www.jb51.net/article/148712.ht

骑猪看日落/ 2022年11月04日 11:14/ 0 赞/ 199 阅读

相关 VUE_render渲染函数基础使用，使用render函数创建自定义按钮

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

妖狐艹你老母/ 2022年11月04日 00:51/ 0 赞/ 361 阅读

相关来聊聊Vue中使用Render函数和JSX

Render函数 `render`函数是组件渲染的重要核心，它跟`template`模板开发一样，只不过这种形式开发，它(`render`)更接近底层，这样能让`Vue`

不念不忘少年蓝@/ 2022年10月13日 12:40/ 0 赞/ 319 阅读

相关 vue中的render函数介绍

简介：对于不了解slot的用法（参考：[大白话vue-slot的用法][vue-slot]）又刚接触render函数的同学来说，官网的解释无疑一脸懵逼，这里就整理下个人对ren

逃离我推掉我的手/ 2022年01月27日 20:47/ 0 赞/ 277 阅读

相关 iview render函数常用总结（vue render函数）

iview 的render函数就是vue的render函数 iview常用在表格里面自定义内容 render函数常用的配置 h就是createdElement的简写

今天药忘吃喽~/ 2021年09月19日 00:30/ 0 赞/ 537 阅读

相关 Vue的render函数

回忆Vue的一些基本概念今天我们学习的目的是了解和学习Vue的`render`函数。如果想要更好的学习Vue的`render`函数相关的知识，我们有必要重温一下Vue中

冷不防/ 2021年09月07日 06:21/ 0 赞/ 401 阅读