javascript - 关于“不应该在子组件内部改变 prop”

问题描述

问 题

官方文档说不应该在子组件内部改变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:'菠萝'}
        ]
    }
});

<div id="app">
    <ol>
        <todo-list v-for="(item,index) in grocery" key="index" :msg="item"></todo-list>
    </ol>
</div>

我不知道我这样算在子组件内部改变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);
        }
    }
});

我越来越懵了，难道不是已经改变了吗？请解释的具体点

解决方案

算是修改父组件的数据，可以用在一些不想写 $emit 的场合

官方不严格反对这种方式

这篇关于javascript - 关于“不应该在子组件内部改变 prop”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！