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

·  阅读 9001

前言

我们开发 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)实现数据双向绑定

图解记忆法:

image.png

子组件传递参数给父组件

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

思路

  • 子:this.$emit('自定义事件名称', 数据) 子组件标签上绑定@自定义事件名称 = '回调函数'
  • 父:methods: { 回调函数() { //逻辑处理 } }

子组件:child.vue

  1. 在子组件中创建一个按钮,给按钮绑定一个事件

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

父组件:father.vue

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

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

总结

  • 子组件中需要以某种方式的方法来触发一个自定义事件(例如点击事件)
  • 子组件使用 this.$emit 方法,第一个参数为父组件定义的方法名称 event,第二个参数为传递的值
  • 在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听(event="Event"),Event(data) 可以接收传过来的参数

图解记忆法:

image.png

  • 在通信中,无论是子组件向父组件传值还是父组件向子组件传值,他们都有一个共同点就是有 中间介质,子向父的介质是自定义事件,父向子的介质是props中的属性。抓准这两点对于父子通信就好理解了

兄弟组件之间的传参

click设置点击事件,用$emit设置通道传参给中转站,弟通过$on接收来自中转站的参数

思路

  • 通过中转站 let bus = new Vue()
  • A:methods :{ 函数{bus.$emit(‘自定义事件名’,数据)}  发送
  • B:created (){bus.$on(‘A发送过来的自定义事件名’,函数)}  进行数据接受

中转站文件

创建 bus.js 做为中转站文件

bus.js 内容为

image.png

child1.vue

image.png

child2.vue

image.png

总结

  • 兄组件通过 click 设置点击事件
  • 兄组件通过 $emit 设置通道传参给中转站
  • 弟组件通过 $on 接收来自中转站的参数

任意组件之间的通信

任意关系的组件之间的传参可以通过 vue-router 来完成,参考文章:vue 系列 -- vue-router 传参

参考文章

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改