如何在渲染函数中使用domProps？

Question

这是一个自定义选择组件，它可以工作，但我无法理解代码的某些部分，

jsFiddle

Vue.component("myselect", {
    props: ['option'],
    render: function (createElement) {
        var self = this    
        var items = []
        for (var i = 0; i < 16; i++) {
            items.push(createElement('option', { attrs: { value: i } }, i))
        }

        return createElement('select', {

            domProps: { value: self.option.value }, // v-bind:value = this binds the default value
            on: {
                input: function (event) {
                    console.log(event.target.value)
                }
            }
        }, items)
    }
})

这会将select的默认值设置为option.value，是<select value='2'>，但html选择标记使用<option selected>，对我来说看起来很神奇。

Answer 1

domProps是指element properties，而非属性。

把它想象成这样......

＆＃13;

＆＃13;

document.getElementById('mySelect').value = 'Two'

＆＃13;

<select id="mySelect">
  <option>One</option>
  <option>Two</option>
  <option>Three</option>
  <option>Four</option>
</select>

＆＃13;

＆＃13;

＆＃13;

当您在select元素上设置value属性时，它会选择具有相应值的选项（至少在Firefox和Chrome中）。