Mengenai "Prop tidak boleh ditukar dalam komponen kanak-kanak"

Question

Dokumentasi rasmi mengatakan bahawa prop tidak boleh ditukar di dalam komponen kanak-kanak

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>

Saya tidak tahu sama ada saya menukar prop di dalam subkomponen seperti ini? Bagaimanapun, tiada ralat dilaporkan.
Jadi apa yang anda maksudkan dengan menukar prop di dalam subkomponen?

---

Sesetengah orang mengatakan bahawa nilai komponen induk tidak berubah

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);
        }
    }
});

Saya semakin keliru, adakah ia tidak berubah? Sila jelaskan perkara-perkara tertentu

Answer 1

Ia boleh dianggap sebagai mengubah suai data komponen induk, dan boleh digunakan dalam beberapa situasi di mana anda tidak mahu menulis $emit

Pegawai tidak menentang keras kaedah ini

Answer 2

Item dalam komponen induk tidak akan berubah. . . Apa guna tukar msg?
Kalau boleh call lagi. . . Kali berikutnya msg dipanggil ia masih sama dengan item

Answer 3

Answer 4

Ia hanya penampilan, nilai item asal yang dihantar tidak berubah sama sekali. Dalam vue1.0, anda boleh menggunakan penghantaran untuk menghantar nilai untuk menukar nilai dan status item