目录
(2)使用第三方的模块:mitt(数据总线方式),创建一个事件中心,由它来进行事件的监听、触发,在这个过程中实现任意组件之间的通信
4.跨级组件之间的通信:provide/inject类似于消息的订阅和发布。provide提供或发送数据,inject接收数据。
(1)provide(name,value):函数接收两个参数
(2)inject(name,default):函数有两个参数
2.生命周期函数:由Vue提供的内置函数,伴随组件的生命周期按次序自动运行 ---- 钩子函数
一.组件之间的通信
1.组件之间的关系:父子关系、兄弟关系、跨级关系
2.父子组件之间的通信(数据传递):
(1)父组件----》子组件:使用props
A.第一步:在父组件中使用子组件时,给子组件绑定属性
B.第二步:在子组件中使用props接收绑定的属性值
(2)子组件----》父组件:使用$emit
A.第一步:在子组件中通过$emit触发指定的事件,同时传值
B.第二步:在父组件中给子组件监听事件,同时接收子组件传来的值
3.兄弟组件之间的通信(数据传输):
(1)使用Vue的状态管理器Vuex:建议在大型项目中使用
(2)使用第三方的模块:mitt(数据总线方式),创建一个事件中心,由它来进行事件的监听、触发,在这个过程中实现任意组件之间的通信
A.第一步:安装
npm install mitt
B.第二步:创建事件中心(event.js)
//导入mitt库
import mitt from "mitt"
//创建事件触发器
const emitter = mitt()
//导出事件触发器
export default emitter
C.第三步:创建组件,在组件中使用事件触发器,触发事件的同时发送数据
D.第四步:接收数据
强调:A组件和B组件是兄弟组件
(1)on('事件名',callback):事件的监听,一旦监听的事件被触发,说明兄弟组件在传递数据&