如何在 vue 的 createElement 中创建选择？

Question

我有一个使用模板的 vue 组件，我想将其更改为使用渲染功能，我知道 createElement('h1', 'title')，但是如何将它与诸如 'select' 之类的所有选项一起使用？这是基于模板的组件：

https://jsfiddle.net/aaoehLqe/

<div id="app">
  <p>{{ message }}</p>
  <myselect  v-bind:option= "option" ></myselect>
  {{option}}
</div>

Answer 1

这是选择组件createElement：

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'),
      ]
    )
  },
})

你可以在这里看到工作小提琴：https : //jsfiddle.net/aaoehLqe/1/

要了解它是如何工作的，您可以在文档中查看createElement的 API 详细信息：

// @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'
  ]
)