vuejs如何实现父子组件之间通信

mac

webstorm

首先打开web编辑器webstorm

创建两个vue文件：parent.vue和child.vue，分别表示父组件和子组件。

编写子组件child.vue，它定义了一套代码，包括样式、文档结构以及自身的事件处理，它通过props定义外部系统可以传入的参数，本例子中定义了一个msg变量，它的类型是String，默认是空字符串。

编写父组件parent.vue，它通过import引入了子组件，并使用components属性将子组件应用到代码中，父组件将本地变量msg作为参数，传入了子组件中，从而完成了父-->子的信息传递。

子组件要通知父组件，就必须以一个事件的形式通知父组件，这里用到了$emit方法，它的第一个参数是一个事件名称，第二个参数是事件附带的参数。

父组件必须监听子组件抛出的事件，并使用函数进行处理，这样一来就完成了子-->父的信息传递。