一、事件总线

事件总线（EventBus）用来解决兄弟组件之间通信的问题；

  1. 创建一个事件总线（一个空的 Vue 实例）;
  2. 谁的数据被修改，谁监听事件；在 created 钩子中 监听事件：eventBus.$on(事件名, 事件函数)
  3. 谁发起修改，谁触发事件；eventBus.$emit(事件名, 数据)
  1. <body>
  2. <div id="app">
  3.   <prev></prev>
  4.   <hr>
  5.   <next></next>
  6. </div>
  8. <script src="vue.js"></script>
  10. <script type="module">
  11.   // import E from './7-eventBus.js'; // 不能导，会报错
  12.   let eventBus = new Vue();
  13.   let prev = {
  14.     template: `<div :style="{background: color}">哥哥 {{color}}</div>`,
  15.     data() {
  16.       return {
  17.         color: 'green'
  18.       }
  19.     },
  20.     created() {
  21.       // 一般在 created 钩子中监听
  22.       // eventBus.$on('change-red', this.toRed)
  23.     },
  24.     mounted() {
  25.       // 在 mounted 中监听也可以
  26.       // eventBus.$on('change-red', this.toRed)
  27.     },
  28.     methods: {
  29.       toRed(val) {
  30.         console.log(val); // val 可以收到事件触发时传递数据
  31.         this.color = val
  32.       }
  33.     }
  34.   };
  35.   let next = {
  36.     template: `<div>弟弟：<button @click="fn">修改</button></div>`,
  37.     data() {
  38.       return {}
  39.     },
  40.     methods: {
  41.       fn() {
  42.         // 弟弟发起修改的一方，所以弟弟触发事件
  43.         eventBus.$emit('change-red', 'red')
  44.       }
  45.     }
  46.   };
  48.   let vm = new Vue({
  49.     el: '#app',
  50.     components: {
  51.       prev,
  52.       next
  53.     }
  54.   });
  56. </script>
  58. </body>

eventBus.js

  1. // 一般真实项目中用到事件总线，只有一个；用的时候从这个模块中导出即可；
  3. import Vue from './vue.js'; // 现在浏览器直接导入还不行，但是用 vue-cli 或者 webpack 就可以
  5. export default new Vue;

event-bus应用.png

二、插槽

插槽：当引用组件时，我们可以向组件的自定义标签中嵌入内容，这些内容可以嵌入到子组件中，但是需要使用插槽，即 slot；

如何使用 slot？

  1. 在子组件中提前定义插槽，在需要的地方写一个 标签；
  2. 把你想要嵌入子组件的内容，写在子组件标签的里面；

匿名 slot 和具名 slot
子组件中的 slot 标签可以设置一个 name 属性，设置了 name 属性的 slot 具名 slot，没有设置 name 属性的叫做匿名 slot；
如果子组件标签中的内容要添加到指定的 slot，需要给这段模板指定 slot 属性；

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Title</title>
  6.   <style>
  7.     * {
  8.       margin: 0;
  9.       padding: 0;
  10.     }
  11.     .modal {
  12.       width: 100vw;
  13.       height: 100vh;
  14.       position: fixed;
  15.       top: 0;
  16.       display: flex;
  17.       justify-content: center;
  18.       align-items: center;
  19.       background: rgba(0, 0, 0, .5);
  20.     }
  21.     .modal .content {
  22.       width: 400px;
  23.       height: 300px;
  24.       /*padding: 15px;*/
  25.       background: #00b38a;
  26.     }
  27.     .content .header {
  28.       height: 80px;
  29.       line-height: 80px;
  30.       font-size: 20px;
  31.       color: yellow;
  32.       padding: 15px;
  33.       border-bottom: 2px solid #000;
  34.     }
  35.     .content .body {
  36.       height: 100px;
  37.       padding-left: 15px;
  38.       font-size: 30px;
  39.       border-bottom: 2px solid #000;
  40.     }
  41.   </style>
  42. </head>
  43. <body>
  44. <div id="app">
  45.   <button @click="open">打开</button>
  46.   <modal :open.sync="flag">
  47.     <div>提示：您确定要删除吗？</div>
  48.     <div slot="before">提示：您确定要增加吗？</div>
  49.     <div slot="before">
  50.     <!--写了 slot = before 之后，这一段模板会添加到子组件的 name 属性为 before 的 slot上-->
  51.       这一段内容是具名 slot 的
  52.     </div>
  53.     <div>只要不写 slot 属性的模板，都会插入到匿名 slot 的位置</div>
  54.   </modal>
  55.   <button @click="open2">打开2</button>
  56.   <modal :open.sync="flag2">
  57.     <div slot="header" class="header">
  58.       <span>!!</span>
  59.       警告！
  60.     </div>
  61.     <div slot="body" class="body">
  62.       不许偷看~~
  63.     </div>
  64.     <div slot="footer" class="footer">
  65.       <button @click="cancel">取消</button>
  66.       <button @click="confirm">确定</button>
  67.     </div>
  68.   </modal>
  69. </div>
  71. <script src="vue.js"></script>
  72. <script type="module">
  73.   import modal from './8-modal.js';
  75.   let vm = new Vue({
  76.     el: '#app',
  77.     data() {
  78.       return {
  79.         flag: false,
  80.         flag2: false
  81.       }
  82.     },
  83.     methods: {
  84.       open() {
  85.         this.flag = true;
  86.       },
  87.       open2() {
  88.         this.flag2 = true
  89.       },
  90.       cancel() {
  91.         this.flag2 = false;
  92.       },
  93.       confirm() {
  94.         this.flag2 = false;
  95.         console.log('确定');
  96.       }
  97.     },
  98.     components: {
  99.       modal
  100.     }
  101.   })
  103. </script>
  104. </body>
  105. </html>

moudal.js

  1. let template = `<div class="modal" v-show="open">
  2.     <div class="content">
  4.       <!--<slot name="before"></slot> 
  5.       <button @click="closeModal">关闭</button>
  6.       <slot></slot>   -->
  7.       <slot></slot> <!--匿名slot-->
  8.       <slot name="header"></slot> <!--具名slot-->
  9.       <slot name="body"></slot>
  10.       <slot name="footer"></slot>
  11.     </div>
  12.   </div>`;
  14. export default {
  15.   template,
  16.   data() {
  17.     return {
  18.       // open: false
  19.     }
  20.   },
  21.   props: ['open'],
  22.   methods: {
  23.     closeModal() {
  24.       // this.$emit('shutdown', false)
  25.       this.$emit('update:open', false)
  26.     }
  27.   },
  28.   mounted() {
  29.     console.log('x');
  30.   }
  31. }

三、Vue-router

路由：根据不同的请求 pathname，做不同的操作；
前端路由：单页面应用中由前端控制路由，根据不同的路由显示不同的页面（其实是不同的组件）；单页面应用（SPA）只有一个 html 文件，切换路由时是切换组件，而不会请求其他的 html 文件；

vue-router
vue 的单页面应用路由需要使用 vue-router；vue-router 监听页面的路由发生变化（页面的 url 就是前端路由），渲染对应的组件；

使用 vue-router 需要使用以下组件：
是一个 vue-router 定义的标签，通过它可以切换到 to 属性指向的路由，如有这个路由对应的组件，就会把这个组件展示到 router-view
用来展示路由对应的组件

VueRouter 默认使用的 hash 模式，hash 改变不会引起页面的刷新，但是会生成历史记录；

vue-router 用法：

  1. 安装并引入 vue-router.js
  2. 设置路由映射表；
  3. 创建 VueRouter 的实例，创建 VueRouter 实例时需要传入路由映射表；
  4. 创建 Vue 实例时配置 router 属性，router 属性的值是 VueRouter 的实例；
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.   <!--router-link 叫做编程式导航-->
  10.   <router-link to="/" tag="button">HOME</router-link> <!--router-link 是用来切换路由的，to 是指定点击 router-link 时要跳转到的路由； tag 指定 router-link 以什么标签渲染到页面中-->
  11.   <router-link to="/home" tag="button">主页</router-link>
  12.   <router-link to="/list" tag="button">LIST</router-link>
  14.   <router-view></router-view>
  15. </div>
  17. <script src="vue.js"></script>
  18. <script src="vue-router.js"></script>
  20. <script>
  22.   let home = {
  23.     template: `<div>HOME</div>`
  24.   };
  25.   let list = {
  26.     template: `<div>LIST</div>`
  27.   };
  29.   let fourOFour = {
  30.     template: '<div>NOT FOUND</div>'
  31.   };
  33.   // 使用 vue-router 需要配置路由映射表
  34.   let routes = [
  35.     {
  36.       path: '/', // path 是路由
  37.       component: home // 路由对应的组件
  38.     },
  39.     {
  40.       path: '/home',
  41.       component: home
  42.     },
  43.     {
  44.       path: '/list',
  45.       component: list
  46.     },
  47.     {
  48.       path: '*', // 除了路由映射表中配置的路由以外的路由，页面渲染成 home / fourOFour
  49.       component: fourOFour
  50.     }
  51.   ];
  53.   // 创建一个 VueRouter 的实例
  54.   let router = new VueRouter({
  55.     routes: routes // 创建 VueRouter 实例时，要传入路由映射表
  56.   });
  58.   // 创建 Vue 实例时配置 router 属性
  59.   let vm = new Vue({
  60.     el: '#app',
  61.     router: router // 配置 router 属性
  62.   });
  64. </script>
  65. </body>
  66. </html>

1. 路由方法

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.   <!--router-link 叫做编程式导航-->
  10.   <router-link to="/" tag="button">HOME</router-link>
  11.   <router-link to="/home" tag="button">主页</router-link>
  12.   <router-link to="/list" tag="button">LIST</router-link>
  14.   <router-view></router-view>
  15. </div>
  17. <script src="vue.js"></script>
  18. <script src="vue-router.js"></script>
  20. <script>
  22.   let home = {
  23.     template: `<div>HOME <button @click="goTo">去列表</button></div>`,
  24.     methods: {
  25.       goTo() {
  26.         // this.$router.push('/list')
  27.         this.$router.push({name: 'list', query: {name: 'mabin', age: 18}});
  28.         // 对象中的 query 是路由后面的问号传参
  29.         // #/list?name=mabin&age=18
  30.       }
  31.     }
  32.   };
  33.   let list = {
  34.     template: `<div>LIST <button @click="back">滚回去</button></div>`,
  35.     methods: {
  36.       back() {
  37.         // this.$router.go(-1) 返回上一页
  38.         this.$router.go(-1);
  39.       }
  40.     }
  41.   };
  43.   let fourOFour = {
  44.     template: '<div>NOT FOUND</div>'
  45.   };
  47.   // 使用 vue-router 需要配置路由映射表
  48.   let routes = [
  49.     {
  50.       path: '/', // path 是路由
  51.       component: home // 路由对应的组件
  52.     },
  53.     {
  54.       path: '/home',
  55.       component: home
  56.     },
  57.     {
  58.       name: 'list', /*路由映射表中配置了 name 属性，使用 $router.push() 时可以传入一个对象
  59.       // {name: 'list'}*/
  60.       path: '/list',
  61.       component: list
  62.     },
  63.     {
  64.       path: '*', // 除了路由映射表中配置的路由以外的路由，页面渲染成 home
  65.       component: fourOFour
  66.     }
  67.   ];
  69.   // 创建一个 VueRouter 的实例
  70.   let router = new VueRouter({
  71.     routes: routes // 创建 VueRouter 实例时，要传入路由映射表
  72.   });
  74.   // 创建 Vue 实例时配置 router 属性
  75.   let vm = new Vue({
  76.     el: '#app',
  77.     router: router // 配置 router 属性
  78.   });
  80.   // vue-router 给我们提供了方法用于切换路由：
  81.   // 配置 router 以后，才能使用 $router 对象
  82.   // 1. this.$router.go(-1) 返回上一页（其实是组件）
  83.   // 2. this.$router.push('/list') 切换到指定的路由
  85. </script>
  86. </body>
  87. </html>

2. 嵌套路由

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Title</title>
  6. </head>
  7. <body>
  9. <div id="app">
  10.   <router-link to="/detail">详情</router-link>
  11.   <router-view></router-view>
  12. </div>
  14. <template id="detail">
  15.   <div>DETAIL
  16.     <router-link to="/detail/profile">个人中心</router-link>
  17.     <router-link to="/detail/about">关于我们</router-link>
  18.     <router-view></router-view> <!--嵌套路由需要在子组件模板中添加 router-view-->
  19.   </div>
  20. </template>
  22. <script src="vue.js"></script>
  23. <script src="vue-router.js"></script>
  25. <script>
  26.   // 从当前页面可以进入到当前页面的子页面中，例如
  27.   // 当前页面的路由：/detail
  28.   // profile 页面路由：/detail/profile
  29.   // about 页面路由：/detail/about
  31.   // profile 和 about 是 /detail 的子路由；
  32.   // 如何实现子路由（路由嵌套），在 /detail 下面配置 children 属性;
  33.   // 在 /detail 对应的组件模板中添加 router-view
  36.   let home = {
  37.     template: `<div>HOME </div>`,
  38.   };
  39.   let detail = {
  40.     template: `#detail`
  41.   };
  43.   let profile = {
  44.     template: `<div>profile</div>`
  45.   };
  47.   let about = {
  48.     template: `<div>about</div>`
  49.   };
  51.   // 使用 vue-router 需要配置路由映射表
  52.   let routes = [
  53.     {
  54.       path: '/', // path 是路由
  55.       component: home // 路由对应的组件
  56.     },
  57.     {
  58.       path: '/home',
  59.       component: home
  60.     },
  61.     {
  62.       name: 'detail',
  63.       path: '/detail', // 带 / 的都是一级路由
  64.       component: detail,
  65.       children: [
  66.         {
  67.           path: 'profile', // 二级路由前面不需要写 /
  68.           component: profile
  69.         },
  70.         {
  71.           path: 'about',
  72.           component: about
  73.         }
  74.       ]
  75.     }
  76.   ];
  78.   // 创建一个 VueRouter 的实例
  79.   let router = new VueRouter({
  80.     routes: routes // 创建 VueRouter 实例时，要传入路由映射表
  81.   });
  83.   // 创建 Vue 实例时配置 router 属性
  84.   let vm = new Vue({
  85.     el: '#app',
  86.     router: router // 配置 router 属性
  87.   });
  90. </script>
  91. </body>
  92. </html>

3. 路由参数

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.   <router-link to="/detail/3/z">文章3</router-link>
  10.   <!--<router-link to="/detail/4/a?name=mabin&age=18">文章4</router-link>-->
  11.   <router-link :to="{name: 'detail', params: {id: 4, text: 'a'}}">文章4</router-link>
  12.   <!--/detail/:id/:text-->
  13.   <router-view></router-view>
  14. </div>
  15. <template id="home">
  17. </template>
  19. <script src="vue.js"></script>
  20. <script src="vue-router.js"></script>
  22. <script>
  23.   // 动态路由：/order/detail/:orderId
  24.   // 路由中的某一部分不是写死的，可以变的一部分要写一个:
  25.   // vue-router 也支持动态路由：
  26.   // /detail/:id/:text 此时 id 和 text 是可以变的；现在我们要研究的问题是如何获取 id 和 text 的值；
  27.   let home = {
  28.     template: '#home'
  29.   };
  31.   let detail = {
  32.     // 获取动态路由的参数 this.$route.params
  34.     template: `<div>id：{{$route.params.id}}；text：{{$route.params.text}}</div>`,
  35.     mounted() {
  36.       // this.$route.params 是动态路由的参数
  37.       // this.$route.query 是问号传参的参数
  38.       console.log(this.$route);
  39.     }
  40.   };
  42.   let routes = [
  43.     {
  44.       name: 'detail',
  45.       path: '/detail/:id/:text',
  46.       component: detail
  47.     }
  48.   ];
  50.   let router = new VueRouter({
  51.     routes
  52.   });
  54.   let vm = new Vue({
  55.     el: '#app',
  56.     router
  57.   });
  59. </script>
  61. </body>
  62. </html>