Vue 组件通信 - 中央事件总线

Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue组件通信 - 中央事件总线

目录

中央事件总线

图示

准备工作

设置页面元素

创建组件

总结


中央事件总线

使用vue的监听和触发来实现中央事件总线方式。

on监听 emit触发,组件按钮绑定点击事件,在事件内部触发。

图示

Vue 组件通信 - 中央事件总线_第1张图片

准备工作

引入Vue及设置图片样式。

准备数据源通过小说网站拿到的json数据;

放在本地json文件中,等待之后请求访问。

示例如下:


设置页面元素

创建vue 解析盒子;创建按钮绑定按钮事件,渲染列表使用组件。

示例如下:

创建组件

创建列表组件和详情组件,并使用中央事件总线绑定和监听组件内部通信。

示例如下:

效果如下:

Vue 组件通信 - 中央事件总线_第2张图片

总结

Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue组件通信 - 中央事件总线

你可能感兴趣的:(前端,#,Vue,vue.js,前端,javascript)