javascript - 關於“不應該在子元件內部改變 prop”

Question

官方文件說不應該在子元件內部改變prop

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>

我不知道我這樣算在子元件內部改變prop嗎？反正是沒有報錯。
那咋樣才叫在子組件內部改變prop呢？

---

有人說並沒有改變父元件的值

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

我越來越懵了，難道不是已經改變了嗎？請解釋的具體點

Answer 1

算是修改父組件的數據，可以用在一些不想寫 $emit 的場合

官方不嚴格反對這種方式

Answer 2

父組件裡面的item並不會改變。 。 。改msg意義何在？
如果能再呼叫的情況下。 。 。下次呼叫msg還是會等於item

Answer 3

Answer 4

只是個表象而已，原來傳入的item值沒有任何變化。在vue1.0中可以用dispatch進行傳值去改變item的值和狀態