vue 之 render 封装一个select组件

最新推荐文章于 2025-03-10 09:22:51 发布

小小liang

最新推荐文章于 2025-03-10 09:22:51 发布

阅读量1.3k

点赞数 1

分类专栏： vue-render函数相关文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_47409897/article/details/125208196

版权

vue-render函数相关专栏收录该内容

5 篇文章

订阅专栏

本文档展示了如何在Vue.js中利用render函数封装一个自定义的Select组件，包括设置属性如value、optionData、placeholder，以及处理change事件。组件支持clearable属性，并提供了示例代码展示其在父组件中的使用方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue 之 render 封装一个select组件

父组件

    value - {{ value }} ; value2 - {{ value2 }}
    <!--  disabled clearable   -->
    <Select v-model="value" :option-data="optionData" placeholder="请选择" clearable />
    <Select v-model="value2" :option-data="optionData" />

      value: '', // 默认值为空字符串
      value2: 'area1',
      optionData: [
        { label: '区域1', value: 'area1' },
        { label: '区域2', value: 'area2' }
      ],

Select.vue

<script>
export default {
  name: 'Select',
  props: {
    value: {
      default: '',
      type: [String, Number]
    },
    optionData: {
      default: () => {
        return []
      },
      type: Array
    }
  },
  computed: {
    newValue: {
      get({ value }) {
        return value
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  },
  methods: {
    onChangeHandle(val) {
      this.newValue = val
    }
  },
  render(createElement) {
    return createElement(
      // 标签
      'el-select',
      // 相关属性参数
      {
        // html 相关的属性 placeholder id 等
        attrs: {
          ...this.$attrs //  ( { placeholder:请输入 } )
        },
        // props相关的
        props: {
          value: this.newValue
        },
        // 事件相关
        on: {
          change: this.onChangeHandle
        }
      },
      this.optionData && this.optionData.map(option => {
        return createElement(
          'el-option',
          {
            props: {
              label: option.label,
              value: option.value
            }
          }
        )
      })

    )
  }
}
</script>