javascript - La valeur du composant ne peut pas être liée dynamiquement.

Question

C'est le code du composant à écrire, et le code qui n'est pas un composant

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

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

Ce qui suit est 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'
    }
});

Le rendu final est

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

Pour celui non composant ci-dessous, la valeur peut être affichée comme un animal de valeur dynamique normalement, tandis que pour celui ci-dessus, il s'agit d'un composant, le nom et l'étiquette sont normaux, mais la valeur ne peut pas être affichée Pourquoi ?

Answer 1

Oui https://jsfiddle.net/stardew/...