vue3 h函数

例子

import SelectEdit from './SelectEdit'
export default {
  data() {
      return {
        name: ''
      }
  },
  render(h) {
      // 如果使用原生的则
      // return h('div', {
      // 这个是挂载组件
      return h(SelectEdit, {
          // 此处是给 SelectEdit 组件传值的（props传值）
         props: {
          value: 1,
          type: 'on'
        },
        // class可以数组的形式也可以对象的形式
        // class: ['speci-class'],
           class: {
          'speci-class': true
        },
        // 样式有-的注意小驼峰 或者使用 string 模式
        style: {
          color: 'red',
          fontSize: '14px',
          // 或者这样
          'font-size': '14px'
        },
        // 普通的 HTML attribute
        attrs: {
          placeholder: '这是给原生html赋值placeholder属性'
        },
        // DOM property
        domProps: {
          innerHTML: 'DOM property',
          // 这个参数等同于h函数的第三个参数
          innerText: 'xxxxxxx'
          },
        // 这里是挂载方法的但不再支持如 `v-on:keyup.enter` 这样的修饰器
        on: {
          // 方法名可以自定义（组件内 $emit('xxxchange', {name: 'zs'})）
          'xxxchange': val => {
            this.name = val.name;
          },
          'click': val => {
            this.name = val.name;
          },
        },
        // 仅用于组件，用于监听原生事件，而不是组件内部使用
        // `vm.$emit` 触发的事件。
        nativeOn: {
          click: this.nativeClickHandler
        },
        // 自定义指令。注意，你无法对 `binding` 中的 `oldValue`
        directives: [
          {
            name: 'my-custom-directive',
            value: '2',
            expression: '1 + 1',
            arg: 'foo',
            modifiers: {
              bar: true
            }
          }
        ],
        // 作用域插槽的格式为
        scopedSlots: {
         default: props => createElement('span', props.text)
        },
         // 如果组件是其它组件的子组件，需为插槽指定名称
        slot: 'name-of-slot',
        // 其它特殊顶层 property
        key: 'myKey',
        ref: 'myRef',
        // 如果你在渲染函数中给多个元素都应用了相同的 ref 名，
          // 那么 `$refs.myRef` 会变成一个数组。
        refInFor: true
     }, '这里是显示文本')
  }
}

 参考链接

https://blog.csdn.net/weixin_47436633/article/details/125800228#:~:text=h%E5%87%BD%E6%95%B0%E7%AC%AC%E4%B8%80%E4%B8%AA%E6%98%AF%E6%A0%87%E7%AD%BE%E5%90%8D%E5%AD%97%20%E6%88%96%E8%80%85%E6%98%AF%E7%BB%84%E4%BB%B6%E5%90%8D%E5%AD%97%EF%BC%8C%E7%AC%AC%E4%BA%8C%E4%B8%AA%E5%8F%82%E6%95%B0%E6%98%AF%E9%85%8D%E7%BD%AE%E9%A1%B9%EF%BC%8C%E7%AC%AC%E4%B8%89%E4%B8%AA%E5%8F%82%E6%95%B0%E6%98%AF%20innerText,%EF%BC%8C%E4%B8%8D%E4%BC%9A%E5%B8%AE%E4%BD%A0%E8%BD%AC%E6%8D%A2%E8%8A%82%E7%82%B9%EF%BC%8C%E5%A6%82%E6%9E%9C%E9%9C%80%E8%A6%81%E8%BD%AC%E6%8D%A2%E6%88%90%E8%8A%82%E7%82%B9%EF%BC%88v-html%EF%BC%89%E8%AF%B7%E5%8E%BB%E7%AC%AC%E4%BA%8C%E4%B8%AA%E5%8F%82%E6%95%B0%E4%B8%AD%E7%9A%84%20domProps%20%E9%85%8D%E7%BD%AE%20innerHTML