javascript – Der Wert in der Komponente kann nicht dynamisch gebunden werden.

Question

Dies ist der Code der zu schreibenden Komponente und der Code, der keine Komponente ist

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

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

Das Folgende ist 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'
    }
});

Das endgültige Rendering ist

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

Für die Nichtkomponente unten kann der Wert normalerweise als dynamisches Werttier angezeigt werden, während es sich bei der darüber liegenden Komponente um einen normalen Namen und eine Bezeichnung handelt, der Wert jedoch nicht angezeigt werden kann. Warum?

Answer 1

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