关于vue3的h函数

h(
          ElInput,
          {
            class: 'w200 ml8',
            placeholder: '关键字搜索',
            clearable: true,
            modelValue: formData.url_pattern,
            'onUpdate:modelValue': (val: string) => {
              formData.url_pattern = val;
            },
            onInput: changeKeyword,
            onClick: [(e: MouseEvent) => e.stopPropagation()],
          },
          {
        default: ()=> 'default slot' prefix: ()
=> h(ElIcon, { class: 'el-input__icon' }, () => h(Search)), },
)

1、v-model 需要写成 modelValue 与 onUpdate:modelValue相互配对
2、@事件写成onXxx
3、插槽在第三个参数写成对象
4、如需自定义指令,如下

import { h, withDirectives, resolveDirective } from 'vue';

export default {
  render() {
    const loading = resolveDirective('loading');
    const spinLoading = resolveDirective('spin-loading');
    return withDirectives(
      h('div', {
        style: {
          width: '100%',
          height: '100%',
        },
      }),
      [
        [spinLoading, '界面加载中...'], // [directiveName, value, arg]
        [loading, true],
      ],
    );
  },
};

  

posted @ 2024-02-20 15:02  谢书怜  阅读(195)  评论(0编辑  收藏  举报