vue3中h函数的常用使用方式汇总

<script>
import { defineComponent} from "vue";
export default defineComponent({
  render(){
    return '123456789'
  }
});
</script>

<script>
import { defineComponent } from "vue";
export default defineComponent({
  render(){
    return '<h2>123456789</h2>'
  }
});
</script>

<script>
import { defineComponent, h } from "vue";
export default defineComponent({
  render() {
    const props = { style: { color: "red" } };
    return h("h2", props, "123456789");
  },
});
</script>

<script>
import { defineComponent, h } from "vue";
export default defineComponent({
  render() {
    const props = { style: { color: "red" } };
    const small = h("small", "副标题");
    return h("h2", props, ["123456789", small]);
  },
});
</script>

<script>
import { defineComponent, h } from "vue";
import ASwitch from "../components/ASwitch.vue";
export default defineComponent({
  components: { ASwitch },

  data() {
    return { checked: false };
  },

  render() {
    return h(ASwitch)
  }
});
</script>

 <a-switch v-model:checked="checked"></a-switch>

<a-switch @update:checked="onChange"></a-switch>
<!-- 等价写法: -->
<a-switch :onUpdate:checked="onChange"></a-switch>

<script>
import { defineComponent, h } from "vue";
import ASwitch from "../components/ASwitch.vue";
export default defineComponent({
  components: { ASwitch },

  data() {
    return { checked: false };
  },

  render() {
    return h(ASwitch, {
      checked: this.checked,
      ["onUpdate:checked"]: (checked) => {
        this.checked = checked;
      },
    });
  },
});
</script>

{
    title: '状态',
    customRender({ record }: any) {
    if (1 === record.state) {
      return h(Tag, { color: 'success' }, () => `开启`);
    } else {
      return h(Tag, { color: 'error' }, () => `关闭`);
    }
  },
},