首页 > 其他分享 >关于vue render函数的写法

关于vue render函数的写法

时间:2024-08-30 18:47:52浏览次数:13  
标签:vue render internalValue CustomInput value props input 写法

vNode 只是用来描述DOM,自身不维护状态,messageBox只是利用vNode渲染DOM,要想实现messageBox内容响应式,需要提供Vue实例(组件):

写一个这样的组件

  1. 新建组件(customRadioGroup.js):
import Vue from "vue";

const CustomInput = Vue.component("CustomRadioGroup", {
  props: ["value"],
  data() {
    return {
      internalValue: this.value,
    };
  },
  watch: {
    value(newVal) {
      this.internalValue = newVal;
    },
  },
  render(h) {
    return h(
      "el-input",
      {
        props: { value: this.internalValue },
        on: {
          input: (value) => {
            this.internalValue = value;
            this.$emit("input", value);
          },
        },
      },
     
    );
  },
});

export default CustomInput;

 

然后这样引用

import CustomInput from "./CustomInput.js"


 this.$msgbox({
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            title:`订正${item.checkingItemName}`,
            message: h(CustomInput, {
              props: { value: this.password },
              on: {
                input: (value) => {
                  this.password = value;
                },
              },
            }),
          }).then(() => {
            console.log(this.password);
            
          }).catch(() => {
            console.log('取消保存');
          });

 

标签:vue,render,internalValue,CustomInput,value,props,input,写法
From: https://www.cnblogs.com/HePandeFeng/p/18389331

相关文章

  • Vue3+.NET7最新框架实战,手写电商管理后台|2023全新录制,前后分离架构(C#/.NET6/.NET Co
    Vue3+.NET7最新框架实战,手写电商管理后台|2023全新录制,前后分离架构(C#/.NET6/.NETCore)https://pan.baidu.com/s/1SBt4RTT_m6uA9pk857KlcQ?pwd=6666https://www.bilibili.com/video/BV16s4y1m7bd/?spm_id_from=333.337.search-card.all.click&vd_source=e6b56a12a1d9ef11f6c13......
  • vue使用html2canvas将页面dom生成图片,解决页面中带有图片导出
    安装npm installhtml2canvas引入importhtml2canvas from 'html2canvas'使用this.$refs.canvasToPic是div的dom,只要在这个div中的区域都可以生成图片1this.$nextTick(()=>{2html2canvas(this.$refs.canvasToPic,{useCORS:true,logging:true}).......
  • Vue 中 v-model 的修饰符
    lazy修饰符:将v-model 改为失去焦点后更新数据。number修饰符:将v-model数据转为数字类型。trim修饰符:去除v-model数据中的首尾空格。语法格式//lazy修饰符<inputv-model.lazy="数据">//number修饰符<inputv-model.number="数据">//trim修饰符<inputv-mod......
  • Vue Cli
    vueCli是基于vue.js进行快速开发的完整系统vue脚手架使用语法:vueinit<模板名称><项目名称>vueinitwebpackvue-spa2安装完成就有项目目录,如下:cdvue-spa2npminstall运行npmrundevbuild构建脚本目录,放置各种配置文件build.js生成环境的构建代码check-versi......
  • WPF mouse down on canvas and draw shapes which render with random colors
    //customcontrol//xaml<UserControlx:Class="WpfApp307.ElpTbk"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"......
  • springboot+vue安心养老一站通服务系统的设计与实现【程序+论文+开题】计算机毕业设计
    系统程序文件列表开题报告内容研究背景随着社会老龄化的加速,养老问题已成为全球性的社会挑战。传统的养老模式面临着资源分配不均、服务效率低下、信息孤岛等诸多问题,难以满足老年人日益增长的多元化、个性化需求。在此背景下,安心养老一站通服务系统的设计与实现显得尤为重......
  • springboot+vue爱心捐赠系统【程序+论文+开题】计算机毕业设计
    系统程序文件列表开题报告内容研究背景在当今社会,随着经济的快速发展与信息技术的日益普及,公益慈善事业逐渐成为连接社会爱心与需要帮助群体的重要桥梁。然而,传统的捐赠方式往往存在信息不对称、流程繁琐、透明度不足等问题,限制了公益资源的有效配置与利用。因此,构建一个高......
  • springboot+vue爱心慈善公益系统【程序+论文+开题】计算机毕业设计
    系统程序文件列表开题报告内容研究背景在当今社会,随着经济的快速发展与人民生活水平的日益提高,社会各界对于慈善公益事业的关注度与参与度也显著提升。然而,传统的慈善捐赠方式往往存在信息不对称、流程繁琐、透明度不足等问题,限制了公益资源的高效配置与利用。特别是在互联......
  • Vue 过滤器(Filter)的理解与用法
    Vue.js是一个渐进式JavaScript框架,它提供了丰富的功能来构建用户界面。其中,过滤器(Filter)是一个非常有用的特性,它允许我们在模板中对数据进行格式化处理。本文将详细介绍Vue过滤器的概念、用法以及一些最佳实践。1.过滤器的基本概念1.1什么是过滤器?过滤器是Vue提供的一种......
  • 基于nodejs_vue+express框架个人健康管理系统的设计与实现_7999g
    个人健康管理系统按照功能由三部分构成的,三部份是用户、医生和管理员。主要功能有出诊医生、预约挂号、健康档案、疾病评枯等。系统软件用户、医生与管理员的功能模块图个人健康服务平台是以医院的状况为起点,综合网络空间开发设计要求。目的是将个人健康通过网络平台变换为在......