vue系列 -- 父传子，子传父，兄弟组件通信

前言

我们开发 vue 项目的时候经常会遇到这样的需求：点击按钮 - 弹出弹窗 - 在弹窗中输入表单数据 - 提交后关闭弹窗

假设主页是 index.vue ，弹窗组件是可以直接在写在 index.vue 中的，但我们为了使 index.vue 更加简洁，同时保证对话框中的变量和主页中的变量不互相干扰，我们会把弹窗组件写在另一个 vue 文件，如：modal.vue 中，这样还有一个好处：其他页面也可以引入该对话框组件 作为子组件

父组件传递参数给子组件

父组件通过import + component写入子组件，然后v-bind绑定数据，子组件通过props接收

思路

父：自定义属性名 + 数据（要传递）=> v-bind:value="数据"

子：props ["父组件上的自定义属性名"] => 进行数据接收

子组件：Child.vue

要点：

在 props 数组里面是父组件上的自定义属性名
在 template 里面进行数据接收

父组件：Father.vue

要点：

引入 child.vue 文件，并为其创建一个变量
在 components 里面写出这个变量
在 template 里面需要注册子组件

保存修改的文件，查看浏览器

更重要的是：我们可以对 message 的值进行 v-bind 动态绑定

此时浏览器中

总结

父组件中通过 import - components - < /> 三部曲注册子组件

子组件在 props 对象中创建一个属性 prop

父组件在注册的子组件标签中添加 prop 属性，即 prop="value"

父组件可以通过 v-bind:prop（:prop）实现数据双向绑定

图解记忆法：

子组件传递参数给父组件

子组件click设置点击事件，$emit设置通道后传参，父组件在methods接收

思路

子：this.$emit('自定义事件名称', 数据) 子组件标签上绑定@自定义事件名称 = '回调函数'

父：methods: { 回调函数() { //逻辑处理 } }

子组件：child.vue

在子组件中创建一个按钮，给按钮绑定一个事件

在响应该点击事件的函数中使用 $emit 来触发一个自定义事件，并传递一个参数

父组件：father.vue

在父组件中的子标签中监听该自定义事件并添加一个响应该事件的处理方法

保存修改的文件，在浏览器中点击按钮

总结

子组件中需要以某种方式的方法来触发一个自定义事件（例如点击事件）

子组件使用 this.$emit 方法，第一个参数为父组件定义的方法名称 event，第二个参数为传递的值

在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听（event="Event"），Event(data) 可以接收传过来的参数

图解记忆法：