在Vue.js 2.0中，为了更好地管理数据流和维护应用状态的一致性，官方推荐采用单向数据流的原则，即子组件不应该直接修改父组件的数据。然而，有些场景下确实需要子组件能够影响到父组件的状态，Vue提供了多种方式来实现这一目标。本文将详细介绍如何在Vue 2.0中实现子组件改变父组件的数据。
我们来看一个简单的同步示例。在这个例子中，父组件将一个包含信息的对象`myData`传递给子组件`v-com`作为props。子组件通过监听按钮点击事件，修改`data.info`的值，由于这是父组件传递过来的对象引用，因此父组件的数据也会同步更新：
```html
<div id="box">
<div>
<p>{{myData.info}}</p>
<v-com :data="myData"></v-com>
</div>
</div>
<template id="tpl">
<div>
<button @click="change">change</button>
<p>{{data.info}}</p>
</div>
</template>
```
```javascript
var app = new Vue({
el: '#box',
data: {
myData: {
info: '父组件信息'
}
},
components: {
'v-com': {
props: ['data'],
template: '#tpl',
methods: {
change() {
this.data.info = 'change info'
}
}
}
}
})
```
这种方式虽然简单，但存在一个问题：如果父组件和子组件同时修改这个对象，可能会导致数据同步的混乱。为了解决这个问题，可以使用异步更新队列，或者使用`$emit`事件来通知父组件进行数据的改变。
接下来，我们看一个异步改变数据的例子。在这个示例中，子组件不再直接修改父组件传递过来的`data`，而是创建自己的局部数据`childData`，并在`mounted`钩子函数中初始化为父组件的数据。当子组件需要改变数据时，它会修改`childData`而不是`data`。这样，尽管子组件的数据发生了变化，但父组件的数据保持不变，因为它们指向不同的内存地址：
```html
<div id="box">
<div>
<p>{{myData}}</p>
<v-com :data="myData"></v-com>
</div>
</div>
<template id="tpl">
<div>
<button @click="change">change</button>
<p>{{childData}}</p>
</div>
</template>
```
```javascript
var app = new Vue({
el: '#box',
data: {
myData: '父组件信息'
},
components: {
'v-com': {
data() {
return {
childData: ''
}
},
props: ['data'],
mounted() {
this.childData = this.data
},
template: '#tpl',
methods: {
change() {
this.childData = 'change info'
}
}
}
}
})
```
然而，如果子组件确实需要改变父组件的状态，通常应该使用`$emit`方法触发自定义事件，然后由父组件监听并响应这个事件来更新数据。例如：
```html
<!-- 子组件模板 -->
<template id="tpl">
<div>
<button @click="$emit('changeInfo')">change</button>
<p>{{childData}}</p>
</div>
</template>
```
```javascript
// 父组件
components: {
'v-com': {
props: ['data'],
template: '#tpl',
data() {
return {
childData: ''
}
},
methods: {
change() {
this.$emit('changeInfo', 'change info')
}
}
}
}
```
```html
<!-- 父组件模板 -->
<v-com :data="myData" @change-info="handleInfoChange"></v-com>
```
```javascript
// 父组件
methods: {
handleInfoChange(newInfo) {
this.myData = newInfo
}
}
```
这样，当子组件触发`changeInfo`事件时，父组件的`handleInfoChange`方法会被调用，从而更新父组件的数据。这种方式既遵循了单向数据流原则，又确保了数据改变的可控性。
Vue 2.0中子组件改变父组件数据的方法主要包括：通过对象引用同步更新、使用异步数据和`$emit`事件通知父组件更新数据。开发者应根据具体需求选择合适的方式，以确保应用的可维护性和数据的一致性。
