La documentation officielle indique que les accessoires ne doivent pas être modifiés à l'intérieur des composants enfants
Vue.component('todo-list',{
props:['msg'],
template:'<li>{{msg.text}}<button @click="fun">click</button></li>',
methods:{
fun:function(){
alert(this.msg.text='芒果');
}
}
});
new Vue({
el:'#app',
data:{
grocery:[
{text:'苹果'},
{text:'香蕉'},
{text:'菠萝'}
]
}
});
<p id="app">
<ol>
<todo-list v-for="(item,index) in grocery" key="index" :msg="item"></todo-list>
</ol>
</p>
Je ne sais pas si je change l'accessoire à l'intérieur du sous-composant comme ça ? Quoi qu'il en soit, aucune erreur n'a été signalée.
Alors, qu'entendez-vous par changer d'accessoires à l'intérieur d'un sous-composant ?
Certaines personnes disent que la valeur du composant parent n'est pas modifiée
Vue.component('todo-list',{
props:['msg'],
template:'<li @click="funn">{{msg.text}}<button @click.stop="fun">click</button></li>',
methods:{
fun:function(){
alert(this.msg.text='芒果');
},
funn:function(n){
alert(this.msg.text);
}
}
});
Je suis de plus en plus confus, ça n’a pas changé ? Veuillez expliquer les points spécifiques
Cela peut être considéré comme une modification des données du composant parent et peut être utilisé dans certaines situations où vous ne souhaitez pas écrire $emit
Le responsable ne s'oppose pas strictement à cette méthode
Les éléments du composant parent ne changeront pas. . . A quoi ça sert de changer de msg ?
S'il peut être rappelé. . . La prochaine fois que msg sera appelé, il sera toujours égal à item
C'est juste une apparence. La valeur originale de l'objet transmise n'a pas changé du tout. Dans vue1.0, vous pouvez utiliser dispatch pour transmettre des valeurs afin de modifier la valeur et le statut de l'élément