Vue2.0 中子组件数据传递给父组件的方法
Vue2.0 中，子组件与父组件之间的数据传递是一件非常重要的事情。在实际开发中，我们经常需要将子组件中的数据传递给父组件，以便更好地处理业务逻辑。那么，如何将子组件的数据传递给父组件呢？下面，我们将介绍 Vue2.0 中子组件数据传递给父组件的方法。
使用 $emit 触发事件
在 Vue2.0 中，我们可以使用 $emit 方法来触发事件，并将数据传递给父组件。例如，在子组件 A.vue 中，我们可以使用以下代码来触发事件：
```html
<template>
<div>
<h3>这里是子组件的内容</h3>
<button v-on:click="spot">点一下就传</button>
</div>
</template>
<script>
export default {
methods: {
spot: function() {
// 与父组件通信一定要加上这句话
this.$emit("spot", '我是子组件传给父组件的内容就我。。')
}
}
}
</script>
```
在上面的代码中，我们使用了 $emit 方法来触发 spot 事件，并将数据传递给父组件。
父组件监听子组件事件
在父组件 App.vue 中，我们可以使用 v-on 指令来监听子组件触发的事件。例如：
```html
<template>
<div id="app">
<!-- 父组件直接用 v-on 来监听子组件触发的事件。 -->
<!-- 需跟子组件中的$emit组合使用 -->
<A v-on:spot="spot"/>
</div>
</template>
<script>
import A from './components/A'
export default {
name: 'App',
components: { A },
methods:{
spot:function(data){
console.log(data)
}
}
}
</script>
```
在上面的代码中，我们使用了 v-on 指令来监听子组件触发的 spot 事件，并将数据传递给父组件。
总结
使用 $emit 方法来触发事件，并将数据传递给父组件是一种非常常见的方法。在实际开发中，我们可以根据实际情况选择合适的方法来实现子组件数据传递给父组件。
需要注意的是，在使用 $emit 方法时，需要在子组件中触发事件，并在父组件中监听事件。只有这样，数据才能成功传递给父组件。
希望本文能够对大家有所帮助，如果大家有任何疑问，请随时留言。
