vue插槽--------默认插槽的基本使用

最新推荐文章于 2024-05-20 00:00:52 发布

真猪bb

最新推荐文章于 2024-05-20 00:00:52 发布

阅读量2.2k

点赞数 2

文章标签： vue vue.js

本文链接：https://blog.csdn.net/qq_44827931/article/details/108926524

版权

以下只是学习过程中的笔记。

一、插槽slot的简单理解

    对于vue中的插槽，我的理解是插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。
   可以动态的改变子组件内容，让子组件更具有拓展性。

二、代码示范

1.子组件插槽内容为空

代码如下（示例）：

       <body>
            <div id="app">  
                <cpn></cpn>
                <!-- 在父组件中使用插槽 -->
                <cpn><span>哈哈哈</span></cpn>    
                <cpn><i>呵呵呵</i></cpn> 
                <cpn></cpn> 
                <cpn></cpn> 
                <cpn></cpn>     
            </div<

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

真猪bb

关注关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
vue插槽--------默认插槽的基本使用

以下只是学习过程中的笔记。一、插槽slot的简单理解对于vue中的插槽，我的理解是插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。可以动态的改变子组件内容，让子组件更具有拓展性。二、代码示范1.子组件插槽内容为空代码如下（示例）： <body>
复制链接

扫一扫