vue学习笔记—插槽、动态组件

最新推荐文章于 2024-06-28 08:56:12 发布

lwq_qqq

最新推荐文章于 2024-06-28 08:56:12 发布

阅读量177

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/m0_48180834/article/details/119939540

版权

本文详细介绍了Vue中的插槽概念，包括普通插槽、具名插槽和作用域插槽的使用方式，以及插槽在实际应用中的场景。同时，文章还讲解了动态组件的原理和应用场景，展示了如何利用动态组件实现界面内容的动态切换，帮助读者更好地掌握Vue的高级特性。

摘要由CSDN通过智能技术生成

一、插槽

插槽的作用：在调用子组件的时候可以为子组件传递模板

这里来了解三种插槽

定义组件：

let com = {

        template: `

          <div>

            <slot>你好</slot>  // 默认插槽

          </div>

        `

      }

注册组件（在vm实例中进行注册，这里使用的是局部注册）：

      components: {

        myCom: component

      }

使用组件：

<my-com>hello vue</my-com>

本来这里的hello vue没有可以显示它的地方，但因为加入了插槽，给其提供了这样的一个位置，就可以显示在页面上，也可以从函数角度理解hello vue是实参， <slot></slot>为形参，实参会将形参替换

插槽内可以包含任何模板代码，甚至是其他组件，当父组件使用时没有设置插槽内容，则组件插槽内容的默认值生效，就上面代码来说，当hello vue不存在时，你好就会显示在页面上

当一个组件中有多个插槽，调用的时候为了给不同的组件传递参数就需要为插槽进行命名，利用的是<slot>元素的name来定义具名插槽

当需要为子组件传递模板时，我们在定义完组件以及组件的注册后，需要在定义组件的时候注意为页面显示的内容设置插槽

一个没

关注