一、需求

1、问题

Vue 2.0 中已经不允许子组件修改父组件的传值内容。

Vue1.0 中可以使用 Sync 的方式子组件直接复制修改父组件传值的内容,从而能够使数据进行同步。

但是Vue2.0已经默认不允许同步修改,如果需要用到修改数据的方式只能使用折中的方式。

二、解决

1、方案

再怎么发展的框架也是离不开javascript。

javascript 中对象的传递是传递的 对象引用,因此利用此特性也能完成子组件对父组件的内容修改。

2、前提

数据传输为对象

因此父组件的data内容是:

var app= new Vue({
    el: '#app',
    data: {
        msg: {"name": 'ptbird'}
    },
    template: '#aaa',
})

在父组件中加入子组件:

components:{
        'bbb':{
            template:'#bbb',
            props:['msg'],
            methods:{
                changeName(){
                    this.msg.name="Postbird"
                }
            }
        }
    }

可以看到,bbb 子组件接收从 aaa 父组件传递的数值的时候,参数名是 msg (这个msg和aaa 中dada 的msg不是一个概念)

而 aaa 和 bbb 的 template 的组织形式如下:

<template id="aaa">
    <div>
        <h1>父组件 - 数据【{{msg.name}}】</h1>
        <hr>
        <!--在向B组件传递内容的时候传递的是msg 因此B的props中应该使用 props:['msg']-->
        <bbb :msg="msg"></bbb>
    </div>
</template>
<template id="bbb">
    <div>
        <h2>子组件 - 数据【{{msg.name}}】</h2>
        <button @click="changeName">修改Name</button>
    </div>
</template>
<div id="app">
    <aaa></aaa>
</div>

此时页面为:

1.jpg

在 bbb 子组件中,changeName 的方法只是改变了 this.msg.name , 但是因为对象的传递传递的是引用,因此实际上此时aaa 父组件的name也已经改动了

点击按钮 页面为:

2.jpg

三、完整的示例

PS: VUE.JS 需要自己引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子组件修改父组件数据</title>
    <script src="./lib/vue.js"></script>
</head>
<body>
<template id="aaa">
    <div>
        <h1>父组件 - 数据【{{msg.name}}】</h1>
        <hr>
        <bbb :msg="msg"></bbb>
    </div>
</template>
<template id="bbb">
    <div>
        <h2>子组件 - 数据【{{msg.name}}】</h2>
        <button @click="changeName">修改Name</button>
    </div>
</template>
<div id="app">
    <aaa></aaa>
</div>
</body>
<script>
window.onload=function(){
var app= new Vue({
    el:'#app',
    data:{
        msg:{"name":'ptbird'}
    },
    template:'#aaa',
    components:{
        'bbb':{
            template:'#bbb',
            props:['msg'],
            methods:{
                changeName(){
                    this.msg.name="Postbird"
                }
            }
        }
    }
})
}
</script>
</html>