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

最新推荐文章于 2024-03-26 14:12:20 发布

剑雨SNOW

最新推荐文章于 2024-03-26 14:12:20 发布

阅读量378

点赞数 1

文章标签： servlet java 开发语言

本文链接：https://blog.csdn.net/m0_63135911/article/details/126669060

版权

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 
    },
})