插槽的分类和使用以及全局事件总线如何添加和使用

1.插槽的分类

1默认插槽

2.作用域插槽

3.具名插槽

1.2插槽的使用

默认插槽：
组件内用 <slot> </slot>占位
使用组件时夹着的地方, 传入标签替换slot

具名插槽：

   <slot name="名称"></slot>
其实就是在子组件中定义插槽时，给对应的插槽分别起个名字，方便后边插入父组件将内容根据name来填充对应的内容。
留下具名slot

作用域插槽 ：
创建组件, 准备slot, 在slot上绑定属性和子组件值
使用组件, 传入自定义标签, 用template和v-slot=“自定义变量名”
自定义变量名会自动绑定slot上所有属性, 就可以使用子组件内值, 并替换slot位置

1.3关于使用插槽的总结:

1.插槽可以自定义标签,作用域插槽可以把组件内的值取出来自定义内容
2.组件内变量绑定在slot上, 然后使用组件v-slot=“变量” 变量上就会绑定slot身上属性和值

2.全局事件总线

2.1 什么是全局事件总线？

全局事件总线就是一种组件间通信的方式，适用于任意组件间通信

2.2如何添加(安装)全局事件总线

 1.引入vue，

2.引入app，

3.关闭vue生产提示

4.创建vm

5.安装全局事件总线，$bus 就是当前的应用的vm

注：前四步在vue2项目的main.js中都有，只需创建第五步即可

//引入vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示 
Vue.config.productionTip = false
 
//创建vm
const vm = new Vue({
    el: '#app',
    render: h => h(App),
    beforeCreate() {
      //安装全局事件总线，$bus就是当前应用的vm
        Vue.prototype.$bus = this 
    },
})

2.3.如何使用全局事件总线

2.使用全局事件总线

在使用全局事件总线之前，需要知道是谁想要接收数据，依靠谁去提供数据

接收数据：假设你的A组件要接收B组件传递过来的数据，则在A组件中给$bus.$on绑定自定义事件，事件的回调留在A组件自身，this.$bus.$on的第一个参数为B组件传递过来时起的名字，第二个参数为一个箭头函数，并且接收B组件传递过来的值

提供数据：B组件想要给A组件传递数据，则在B组件中给$bus.$emit绑定自定义事件