javascript - 组件里边的value无法动态绑定值。

Question

这个是要写的组件的代码，跟不是组件的代码

    <p id="parent">
        <child :message="animal"></child>
    </p>

    <select name="sth" id="sth">
        <option :value="value">{{text}}</option>
    </select>

下边的是JS

Vue.component('child',{
    template:'<select :name="message+\'Select\'">\
        <optgroup :label="message">\
            <option :value="message">{{message}}</option>\
        </optgroup>\
    </select>',
    props:['message']
});
new Vue({
    el:"#parent",
    data:{
        animal:'phoenix'
    }
});
new Vue({
    el:"#sth",
    data:{
        value:'animal',
        text:'animation'
    }
});

最后渲染出来的是

<p id="parent">
    <select name="phoenixSelect">
        <optgroup label="phoenix">
            <option>phoenix</option>
        </optgroup>
    </select>
</p>
<select name="sth" id="sth">
    <option value="animal">animation</option>
</select>

下边那个非组件的，value就能正常显示成动态值animal，而上边那个是组件的，name跟label都正常，就是value显示不出来，请问是为什么啊？

Answer 1

有的啊https://jsfiddle.net/stardew/...