组件通信分为三种(父传子、子传父、兄弟通信)

第一种(父传子(props))
在父组件的子组件标签上面定义一个自定义属性把要传递过去的数据挂载到属性上面去,然后在子组件里面的props里面接收
对于vue组件通信的理解
在子组件的props里面接收
对于vue组件通信的理解
上面使用数组方式来接受的,不可以设置props验证和设置默认值

下面是用到了对象的方式来进行接收
对于vue组件通信的理解

第二种(子传父($emit))
在父组件中定义一个方法,然后在子组件的标签上面自定义一个事件名,然后在子组件中使用this.$emit()来触发父组件中定义的事件
父组件
对于vue组件通信的理解
对于vue组件通信的理解
子组件
对于vue组件通信的理解
对于vue组件通信的理解

第三种(兄弟通信(eventBus和vuex))
首先创建一个Vue实例,并写在创建好的bus文件中,然后在两个兄弟组件中分别引入刚才创建的bus文件,
在要传递数据的一方通过bus.$emit发送数据,然后在接收数据的一方通过bus.$on接受数据,数据是以回调函数的参数的形式传递过来的

Bus文件
对于vue组件通信的理解
两个兄弟组件中分别引入Bus文件
对于vue组件通信的理解
在要传递数据的兄弟组件中
设置点击事件
对于vue组件通信的理解
设置传递的数据
对于vue组件通信的理解
方法内容
对于vue组件通信的理解

在接收数据的兄弟组件中接收数据
对于vue组件通信的理解

vuex
vuex 是一个全局状态管理工具,主要解决大中型复杂项目的数据共享问题,主要包括 state,actions,mutations,getters 和 modules 5 个要素,组件通过 dispatch 到 actions,actions是异步操作,再 actions中通过 commitmutationsmutations 再通过逻辑操作改变 state,从而同步到组件,更新其数据状态

在src目录下新建一个store文件夹,在store目录下新建一个index.js文件
index.js文件
对于vue组件通信的理解
main.js文件
对于vue组件通信的理解
对于vue组件通信的理解

相关文章:

  • 2021-10-24
  • 2023-04-11
  • 2021-08-07
  • 2021-08-08
  • 2022-12-23
  • 2021-10-19
  • 2021-12-07
  • 2021-09-20
猜你喜欢
  • 2021-11-02
  • 2022-01-10
  • 2021-05-18
  • 2021-09-14
  • 2022-12-23
  • 2022-12-23
相关资源
相似解决方案