vue3高级技巧

ref

渲染时挂载ref

result.ref = el => {
    if (node.cid) {
      pageConfig().putDomRef(node.cid as string, el);
    }
  }

v-model实现

import {defineComponent, h, ref, resolveComponent} from "vue";

export default defineComponent({
  name: 'SizeUnit',
  props: {
    modelValue: String,

  },
  setup() {
    return {
      value: ref(),
      options: [{
        label: 'px',
        value: 'px',
      }, {
        label: 'rem',
        value: 'rem',
      },]
    }
  },
  render() {
    this.value = this.modelValue;
    let children = this.options.map(item => {
      return h(resolveComponent('el-option'), {
        label: item.label,
        value: item.value
      })
    })
    return h(resolveComponent('el-select'), {
      modelValue: this.value,
      value: this.value,
      'onUpdate:modelValue': (value) => {
        this.value = value;
        this.$emit('update:modelValue', value);
      },
    }, children)
  },
})

posted @ 2022-07-19 16:34  fight139  阅读(227)  评论(0编辑  收藏  举报