vue3+ts：render极简demo -- 引入element ui el-input组件

一、示例一：

父组件：

<template>
  <div class="home">
    <render-input
      :msg="title"
      @updateMsg="updateMsg"
    >
    </render-input>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component';
import renderInput from './components/render-components2.vue';

@Options({
  components: {
    renderInput,
  },
})
export default class Home extends Vue {
  public title = 'title'
  public updateMsg(val:any){
    console.log('23um', val)
    this.title = val
  }
}
</script>

子组件：

<script lang="ts">
import { ElInput } from "element-plus";
import { defineComponent, h, watch } from "vue";

export default defineComponent({
  props: {
    msg: {
      type: String,
      default: '',
    },
  },
  emits: ['updateMsg'],
  setup(props, { emit, attrs }: any) {
    return (props:any) => {
      watch(
        props.msg,
        (val) => {
          console.log('18', val)
        },
        { immediate: true }
      )
      return h(
        "div", // 标签，只写标签名，不写<>
        { // 属性
          ref: 'test-render-ref',
          class: 'test-render-class',
          // innerHTML: 'test-render-html' // 这里打开后子元素里边innerHTML内容不能展示
        },
        [ // 子元素
          h(ElInput,{
            ...ElInput.$el,
            ...ElInput.$attrs,
            class: 'test-render-class-child',
            placeholder: '请输入内容',
            style: {
              color: 'FF0000'
            },
            modelValue: props.msg,
            "onUpdate:modelValue": ($event:any) => {
              console.log('25', $event)
              console.log('27', ElInput)
              emit('updateMsg', $event)
            },
          })
        ]
      );
    };
  }
})
</script>

这里通过emit调用父组件的方法，改变值，然后再次单向数据流传递到子组件，子组件input数据更新。

这种方法在父组件定义数据，在子组件实现逻辑，再返回数据到父组件，个人认为是适合封装复杂组件的。

二、示例二：

<script lang="ts">
import { ElInput } from "element-plus";
import { defineComponent, h, ref } from "vue";

export default defineComponent({
  props: {
    msg: {
      type: String,
      default: '',
    },
  },
  emits: ["updateMsg"],
  setup(props, { emit, attrs }: any) {
    return () => {
      let inputValue = ref("123456");
      return h(
        "div", // 标签，只写标签名，不写<>
        {
          // 属性
          ref: "test-render-ref",
          class: "test-render-class",
          // innerHTML: 'test-render-html' // 这里打开后子元素里边innerHTML内容不能展示
        },
        [
          // 子元素
          h(
            ElInput,
            {
              ...ElInput.$el,
              ...ElInput.$attrs,
              class: "test-render-class-child",
              placeholder: "请输入内容",
              style: {
                color: "FF0000",
              },
              modelValue: inputValue.value,
              "onUpdate:modelValue": ($event: any) => {
                // 实现了数据更新
                return (inputValue.value = $event.target.value);
              }
            }
          )
        ]
      )
    }
  }
})
</script>

在"onUpdate:modelValue" 里实现修改后的值

三、示例三：

父组件：

<template>
  <div class="home">
    <render-input
      :msg="title"
      @updateMsg="updateMsg"
    >
    </render-input>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component';
import renderInput from './components/renderDiv.vue';

@Options({
  components: {
    renderInput,
  },
})
export default class Home extends Vue {
  public title = 'title'
  public updateMsg(val:any){
    console.log('23um', val)
    this.title = val
  }
}
</script>

子组件：

<script lang="ts">
import { ElInput } from "element-plus";
import { defineComponent, h, ref } from "vue";

export default defineComponent({
  props: {
    msg: {
      type: String,
      default: '',
    },
  },
  emits: ["updateMsg"],
  setup(props, { emit, attrs }: any) {
    return () => {
      let inputValue = ref("123456");
      console.log('16inputValue', inputValue.value)
      if(props.msg){
        inputValue.value = props.msg
      }
      return h(
        "div", // 标签，只写标签名，不写<>
        {
          // 属性
          ref: "test-render-ref",
          class: "test-render-class",
          // innerHTML: 'test-render-html' // 这里打开后子元素里边innerHTML内容不能展示
        },
        [
          // 子元素
          h(
            ElInput,
            {
              ...ElInput.$el,
              ...ElInput.$attrs,
              class: "test-render-class-child",
              placeholder: "请输入内容",
              style: {
                color: "FF0000",
              },
              modelValue: inputValue.value,
              "onUpdate:modelValue": ($event: any) => {
                // 实现了数据更新
                return (inputValue.value = $event.target.value);
              },
            },
          ),
          h("span", {
            class: "test-render-class-button",
            style: {
              color: "#FF0000",
              border: "1px solid #ccc",
              width: "60px",
              cursor: "pointer",
            },
            innerHTML: "提交",
            onClick: () => {
              emit('updateMsg', inputValue.value += 's-i')
            },
          }),
        ]
      );
    };
  },
});
</script>

四、欢迎交流指正，关注我一起学习。