javascript - Nilai dalam komponen tidak boleh terikat secara dinamik.

Question

Ini ialah kod komponen yang akan ditulis, dan kod yang bukan komponen

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

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

Berikut ialah 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'
    }
});

Rendering terakhir ialah

<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>

Bagi bukan komponen di bawah, nilai boleh dipaparkan sebagai haiwan nilai dinamik secara normal, manakala untuk yang di atas ia adalah komponen, nama dan label adalah normal, tetapi nilainya tidak boleh dipaparkan.

Answer 1

Ya https://jsfiddle.net/stardew/...