在Vue2.0中，构建应用常常会借助vue-cli和webpack这两个强大的工具。vue-cli用于快速搭建项目结构，而webpack则是强大的模块打包器，能够帮助处理JavaScript、CSS、图片等资源。本文将通过实例讲解如何在这样的环境中实现父子组件间的通信。
我们需要设置开发环境。在命令行中，依次执行以下命令：
1. 全局安装vue-cli：`npm install --global vue-cli`
2. 使用vue-cli初始化一个基于webpack的项目：`vue init webpack vue-demo`
3. 进入项目目录：`cd vue-demo`
4. 安装所有依赖包：`npm install`
5. 运行项目：`npm run dev`
接下来，我们将探讨父子组件通信的两种主要方式：父组件向子组件传递数据和子组件向父组件传递数据。
**一、父组件向子组件传递数据**
1. 创建一个名为`Child.vue`的子组件，声明一个`props`属性，如`content`，用于接收父组件传递的数据：
```html
<template>
<div>
<h3>这是子组件</h3>
<p>{{content}}</p>
</div>
</template>
<script>
export default {
props: ['content']
}
</script>
```
2. 在`App.vue`中，导入子组件并使用`:content`或`v-bind:content`来绑定`msg`数据到子组件的`content`属性：
```html
<template>
<div id="app">
<child :content="msg"></child>
</div>
</template>
<script>
import Child from './components/Child.vue'
export default {
name: 'app',
data() {
return {
msg: '这是来自父组件的问候'
}
},
components: {
Child
}
}
</script>
```
**二、子组件向父组件传递数据**
1. 修改`Child.vue`，添加一个`send`方法，使用`$emit`触发一个名为`ParentRecEv`的自定义事件，并附带要传递的信息：
```html
<template>
<div>
<h3>这是子组件</h3>
<p>{{content}}</p>
<p>
<input type="button" value="告诉父王一个消息" v-on:click="send">
</p>
</div>
</template>
<script>
export default {
props: ['content'],
methods: {
send() {
this.$emit('ParentRecEv', "父王,孩儿正在跟ghostwu学习vue2.0")
}
}
}
</script>
```
2. 更新`App.vue`，监听`ParentRecEv`事件，并定义响应方法`showMsg`来接收子组件传递的信息：
```html
<template>
<div id="app">
<child :content="msg"></child>
<child v-bind:content="msg" v-on:ParentRecEv="showMsg"></child>
<p>{{data}}</p>
</div>
</template>
<script>
import Child from './components/Child.vue'
export default {
name: 'app',
data() {
return {
msg: '这是来自父组件的问候',
data: ''
}
},
methods: {
showMsg(msg) {
this.data = msg
}
},
components: {
Child
}
}
</script>
```
通过以上步骤，我们就实现了Vue2.0中基于vue-cli+webpack的父子组件通信。父组件通过`props`属性向子组件传递数据，而子组件则通过`$emit`触发自定义事件来通知父组件。这种通信机制在构建复杂的Vue应用时至关重要，它使得组件之间能灵活地共享和交互数据，从而提高代码的可复用性和维护性。
