Vue笔记-2.发布订阅

前言

什么叫做发布订阅，简单来说就是爷爷、爸爸和孙子祖孙三代的通信
现在有个需求，做个tabs

image.png

image.png

思路如下所示：

image.png

首先会创建五个组件，它们分别是tabs(爷爷)，head(大儿子)，item(大儿子的儿子们)，body(二儿子)和pane(二儿子的儿子们)

一开始item1 是亮着的，那么pane也应该是亮着的。倘若这时候要是点击了item2，怎么通知到pane2呢？

第一种方法是：一开始从爷爷这通知，看红色箭头，这时候点击ietm2,看蓝色箭头，通知head，关闭item1，在返回tabs改变selected=item2，在通知body，关闭pane1，并点亮pane2。(麻烦)

第二种方法就是 发爷爷、爸爸和孙子祖孙三代的通信 布订阅
另外再做一个变量，名为EventBus，当我点击了item2的时候，这时候通知EventBus，由EventBus通知tabs，更改selected=item2。点击item3，方法如上。

实例

index.html

    
    
        
            
            
                
                美女
            
            
                财经
            
            
                体育
            
        

        
            
                美女相关资讯
            
            
                财经相关资讯
            
            
                体育相关资讯
            
        
    

tabs.vue

解析：

• 这里面的selected是选择哪个item，是必须要输入的值，这里面的要接收前端开发者传来的值，所以放在props中，另一点是required的含义是：不允许为空，必须传值进来
• includes 和 indexof 的区别
  includes 不支持IE 传的值是布尔型
  indexof 支持IE 结果是数值
• data和props的区别
• provide()与inject
  其余的子组件中必须要有 inject

开始的写法

在浏览器中运行后，发现打印出来的值没有eventBus，于是将new Vue 声明在 data(){}里面

image.png

image.png

body和head的写法

----------------------------

item和pane的写法