Javascript 如何在vue的createElement中创建select?

Javascript 如何在vue的createElement中创建select?,javascript,vue.js,Javascript,Vue.js,我有一个使用模板的vue组件,我想将其更改为使用渲染功能,我知道createElement'h1','title',但如何将其与诸如'select'之类的选项一起使用?以下是基于模板的组件: 这是一个基于你的小提琴的基本版本 Vue.component("mySelect", { props:["value"], render(h){ const vm = this; let options = []; for (let c = 0; c < 18; c++

我有一个使用模板的vue组件,我想将其更改为使用渲染功能,我知道createElement'h1','title',但如何将其与诸如'select'之类的选项一起使用?以下是基于模板的组件:


这是一个基于你的小提琴的基本版本

Vue.component("mySelect", {
  props:["value"],
  render(h){
    const vm = this;
    let options = [];
    for (let c = 0; c < 18; c++)
      options.push(h("option", {
        domProps:{innerHTML: c},
        attrs:{value: c},
      }))
    return h("select",{
      domProps:{
        value: this.value.value
      },
      on:{
        input(event){
          vm.$emit('input', {value:event.target.value})
        }
      }
    }, options)
  }
})
你可以试试这个:

Vue.component'myselect'{ 道具:[“选项”], 资料{ 返回{ 项目:[ // ] } }, 渲染h{ var self=这个 返回h'select'{ 类:{“窗体控件”:true}, domProps:{value:this.option.value}, 关于:{ 输入事件{ self.option.value=event.target.value } } },this.items.mapitem=>h'option'{ 属性:{value:item} },项目 } } []


请检查§ions。

以下是使用createElement选择组件:

您可以在此处看到工作小提琴:

要了解其工作原理,您可以在文档中查看API的详细信息:


道具,道具和属性,有什么区别?这里有点混乱,请开导一下,thanks@AngeloC道具用于父子通信,用于传递DOM属性,如textContent、innerHTML、acceptCharset等,而用于普通HTML属性,如id、name和类似内容。@Saurabh您知道domProps/attr是因为您阅读了vue的源代码吗?或者如果有关于domProps的vue文档?我从vue文档中搜索了domProps/createElement,但没有找到任何内容。@hyyou2010
Vue.component("mySelect", {
  props:["value"],
  render(h){
    const vm = this;
    let options = [];
    for (let c = 0; c < 18; c++)
      options.push(h("option", {
        domProps:{innerHTML: c},
        attrs:{value: c},
      }))
    return h("select",{
      domProps:{
        value: this.value.value
      },
      on:{
        input(event){
          vm.$emit('input', {value:event.target.value})
        }
      }
    }, options)
  }
})
Vue.component('myselect', {
  props: ['option'],
  render: function(createElement) {
    var self = this
    return createElement(
      'select', {
        domProps: {
          value: self.option.value
        },
        on: {
          input: function(event) {
            self.option.value = event.target.value
          }
        }
      }, [
        createElement('option', {
          attrs: {
            value: 0
          }
        }, 'Under 1'),
        createElement('option', {
          attrs: {
            value: 1
          }
        }, '1'),
      ]
    )
  },
})
// @returns {VNode}
createElement(
  // {String | Object | Function}
  // An HTML tag name, component options, or function
  // returning one of these. Required.
  'div',
  // {Object}
  // A data object corresponding to the attributes
  // you would use in a template. Optional.
  {
    // (see details in the next section below)
  },
  // {String | Array}
  // Children VNodes. Optional.
  [
    createElement('h1', 'hello world'),
    createElement(MyComponent, {
      props: {
        someProp: 'foo'
      }
    }),
    'bar'
  ]
)