【Vue】零基础学习Vue: 第23课 Vue 单向数据流父组件的属性值子组件如何更改：

单向数据流原理：

子组件不能直接修改父组件中传递的数据 如需间接改变父组件传递的数据 （解决方法：可以在子组件data选项中存储父组件传递的数据之后修改子组件中的数据 即可）

以下是实现代码：

    
    子组件改变父组件参数
    
    




    
    




    

        
我是子组件，父组件传递的数据msg是{{msg}}
        
我是子组件，点击我更改父组件传递的a值{{b}}
    




    let son = {
        template:'#son',
        props:['msg','a'],
        //定义子主件的变量
        data(){
            return {
                b:this.a    //存储父组件传递的数据
            }
        },
        //子主件方法
        methods:{
            change(){
                console.log('函数执行')
                this.b++  //修改子组件中的数据
            }
        }
    }

    let vm = new Vue({
        el:'#app',  //父组件
        //父组件的数据
        data:{
            msg:2,
            a:1
        },
        //注册子组件
        components:{
            son
        }
    })

运行结果如下：

我是子组件，父组件传递的数据msg是2 我是子组件，点击我更改父组件传递的a值1

自己动手试一下吧！ 代码是完整的哦！把代码复制自己创建一个html文件粘贴就行啦！