子组件中修改props的正确方式

时间:2021-6-12 作者:qvyue

首先我们创建子父组件

父组件传值msgVal给子组件

子父组件传值(子组件改变prop值)

{{msg}}

import vChild from './vChild.vue' export default { components:{ vChild }, data(){ return{ msg:'这是父组件哦' } } }

2.在子组件中:(我们尝试用changeProps直接改变msgVal值)

子组件
props:{{msgVal}} Start
export default { props:['msgVal'], data(){ return{ } }, methods:{ changeProps(){ this.msgVal = '改变了props' } } }

控制台报错
简单来说就是 他希望避免直接改变该属性 最好用计算属性值或者基于属性值的数据来去修改他

所以~我们可以这样:
plan1:“` data中声明mag1 在 mounted函数中初始化赋值 后续操作直接用mag1来代替

msgVal

        props:['msgVal'],
        data(){
            return{
                mag1:''
            }
        },
        methods:{
            changeProps(){
                console.log('111111')
                this.mag1 = '改变了props'
            }
        },
        mounted(){
            this.mag1 = this.msgVal
        },
        computed:{
           msg2(){
               return this.msgVal
           } 
        },
    }

PlanB:用计算属性来获取值 msg2即为props传参数的值 后续直接用它~

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。