关于vue render函数的写法

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('取消保存');
          });