vue插槽初步了解

最新推荐文章于 2022-11-08 17:03:09 发布
最新推荐文章于 2022-11-08 17:03:09 发布
阅读量104 收藏
点赞数
分类专栏： vue 学习记录
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaonanhaijing/article/details/109341334
版权

首先我们想先创建一个子组件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Vue中的插槽(slot)</title>
    <script src='./vue.js'></script>
</head>

<body>

    <div id="root">
        <child></child>
    </div>

    <script>
        Vue.component('child', {
            template: '<div><p>hello</p></div>'
        })


        var vm = new Vue({
            el: '#root'
        })
    </script>

</body>

</html>

然后 我如何转意p标签呢

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Vue中的插槽(slot)</title>
    <script src='./vue.js'></script>
</head>

<body>

    <div id="root">
        <!-- 向子组件进行传值 -->
        <child content='<p>Dell</p>'></child>
    </div>

    <script>
        Vue.component('child', {
            props: ['content'],
            // 接受过content后我们可以插入插值表达式里了
            template: `<div>
                        <p>hello</p>
                        <div v-html="this.content"></div>
                        </div>`
        })


        var vm = new Vue({
            el: '#root'
        })
    </script>

</body>

</html>

运行效果图
在这里插入图片描述
我们发现转义成功
但是我们有更好的解决方案

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Vue中的插槽(slot)</title>
    <script src='./vue.js'></script>
</head>

<body>

    <div id="root">

        <child>
            <p>Dell</p>
        </child>
    </div>

    <script>
        Vue.component('child', {

            //    这里显示的就是父组件向子组件插入的标签
            template: `<div>
                       <slot></slot>
                        </div>`
        })


        var vm = new Vue({
            el: '#root'
        })
    </script>

</body>

</html>

在这里插入图片描述
通过插槽 我们可以更好的调用dom元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Vue中的插槽(slot)</title>
    <script src='./vue.js'></script>
</head>

<body>

    <div id="root">

        <h1>
            <p>Dell</p>
        </h1>
    </div>

    <script>
        Vue.component('child', {

            //    这里显示的就是父组件向子组件插入的标签
            template: `<div>
                       <p>Hello</p>
                       <slot></slot>
                        </div>`
        })


        var vm = new Vue({
            el: '#root'
        })
    </script>

</body>

</html>

在这里插入图片描述
这里还有个有趣的现象 下面的默认内容不显示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Vue中的插槽(slot)</title>
    <script src='./vue.js'></script>
</head>

<body>

    <div id="root">

        <h1>
            <p>Dell</p>
        </h1>
    </div>

    <script>
        Vue.component('child', {

            //    这里显示的就是父组件向子组件插入的标签
            template: `<div>
                       <p>Hello</p>
                       <slot>默认内容</slot>
                        </div>`
        })


        var vm = new Vue({
            el: '#root'
        })
    </script>

</body>

</html>

在这里插入图片描述
但是如果将插槽的内容取消

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Vue中的插槽(slot)</title>
    <script src='./vue.js'></script>
</head>

<body>

    <div id="root">

        <child></child>
    </div>

    <script>
        Vue.component('child', {

            //    这里显示的就是父组件向子组件插入的标签
            template: `<div>
                       <p>Hello</p>
                       <slot>默认内容</slot>
                        </div>`
        })


        var vm = new Vue({
            el: '#root'
        })
    </script>

</body>

</html>

在这里插入图片描述
此时我们看另外一个例子

首先不使用插槽:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Vue中的插槽(slot)</title>
    <script src='./vue.js'></script>
</head>

<body>

    <div id="root">
        <content>

        </content>


    </div>

    <script>
        Vue.component('child', {


            template: `<div>
                      <div class= 'content'>content</div>
                        </div>`
        })


        var vm = new Vue({
            el: '#root'
        })
    </script>

</body>

</html>

运行效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Vue中的插槽(slot)</title>
    <script src='./vue.js'></script>
</head>

<body>

    <div id="root">
        <content>
        </content>


    </div>

    <script>
        Vue.component('content', {


            template: `<div>
                      <div class= 'content'>content</div>
                        </div>`
        })


        var vm = new Vue({
            el: '#root'
        })
    </script>

</body>

</html>

在这里插入图片描述
因为content是关键字 所以我们改一个名字就可以了

具体代码如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Vue中的插槽(slot)</title>
    <script src='./vue.js'></script>
</head>

<body>

    <div id="root">
        <body-content>
        </body-content>


    </div>

    <script>
        Vue.component('body-content', {


            template: `<div>
                      <div class= 'content'>content</div>
                        </div>`
        })


        var vm = new Vue({
            el: '#root'
        })
    </script>

</body>

</html>

在这里插入图片描述
接下来 我们再写一个例子 看看效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Vue中的插槽(slot)</title>
    <script src='./vue.js'></script>
</head>

<body>

    <div id="root">
        <body-content>
            <div class='header'>header</div>
            <div class='footer'>footer</div>

        </body-content>


    </div>

    <script>
        Vue.component('body-content', {


            template: `<div>
                        <slot></slot>
                      <div class= 'content'>content</div>
                      <slot></slot>
                        </div>`
        })


        var vm = new Vue({
            el: '#root'
        })
    </script>

</body>

</html>

在这里插入图片描述
之所以显示成这样是因为
在这里插入图片描述
这两个插槽 都起作用了 但是有没有好的解决方案

我们可以给插槽起名字

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Vue中的插槽(slot)</title>
    <script src='./vue.js'></script>
</head>

<body>

    <div id="root">
        <body-content>
            <div class='header' slot='header'>header</div>
            <div class='footer' slot='footer'>footer</div>

        </body-content>


    </div>

    <script>
        Vue.component('body-content', {


            template: `<div>
                        <slot name='header'></slot>
                      <div class= 'content'>content</div>
                      <slot name='footer'></slot>
                        </div>`
        })


        var vm = new Vue({
            el: '#root'
        })
    </script>

</body>

</html>

在这里插入图片描述

Vue中的插槽(slot) 
<div id="root">
    <body-content>

        <div class='footer' slot='footer'>footer</div>

    </body-content>


</div>

<script>
    Vue.component('body-content', {


        template: `<div>
                    <slot name='header'>default header</slot>
                  <div class= 'content'>content</div>
                  <slot name='footer'></slot>
                    </div>`
    })


    var vm = new Vue({
        el: '#root'
    })
</script>

在这里插入图片描述

Vue中的插槽(slot) 
<div id="root">
    <body-content>

        <div class='footer' slot='footer'>footer</div>

    </body-content>


</div>

<script>
    Vue.component('body-content', {


        template: `<div>
                    <slot name='header'>
                    <h1>default header</h1>
                    </slot>
                  <div class= 'content'>content</div>
                  <slot name='footer'></slot>
                    </div>`
    })


    var vm = new Vue({
        el: '#root'
    })
</script>

在这里插入图片描述

西门吃雪……
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
第6章第27节：使用UISceneConfiguration往项目中导入SceanDelegate [SwiftUI快速入门到实战]
互动教程网[www.hdjc8.com]
09-08 434
由SwiftUI管理生命周期的项目，不仅默认不提供AppDelegate，也不会提供SceanDelegate。本节演示如何往项目中导入SceanDelegate。 使用SceanDelegate，可以很方便的管理场景生命周期，并且可以处理来自快捷菜单的跳转。在打开的文件模板窗口中，选择此处的模板。 点击下一步按钮，进入下一步设置页面。 在文件名称输入框里，输入文件的名称。 然后点击创建按钮，完成SceanDelegate.swift文件的创建。 接着开始编写代码，实现Sc..
ios 使用xcode11 新建项目工程的步骤详解
08-19
主要介绍了ios 使用xcode11 新建项目工程 （值得注意的问题）,本文分步骤通过图文的形式给大家展示，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
11纯代码 oc xcode_iOS开发之Xcode11后纯代码项目工程设置
weixin_39713335的博客
12-22 207
Xcode 11发布之后，新建iOS项目工程时，会有很多变化，最大的变化是多了文件SceneDelegate，此时如果希望通过纯代码设置界面，流程与以往会有一些不一样，本文简单介绍一下。纯代码的条件删除Main Interface中的Main，同时需要删除info.plist中的如下代码UISceneStoryboardFileMain项目文件变化AppDelegate.swift文件负责App的...
OC学习笔记02——如何使用Xcode创建一个OC程序
ruins_k的博客
03-19 2895
创建一个OC程序 1）打开Xcode 2)创建项目 OS-Application-command Line Tool 3）选择语言为Objective-C 4）修改OC源文件 main.m 5）修改OC源文件 NSLog 6）运行（Command+R），并查看运行结果 ...
iOS13 (Xcode11）一些新特性
jeversonjee's blog
07-08 330
SeceneDelegate SceneDelegate!!! 除了多了个SceneDelegate文件，查看Info.plist 发现多了个有关Application Scene Mainfest配置属性。 代码变化 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { // Override point for custom
Vue插槽原理与用法详解
10-17
Vue.js 是一款流行的前端框架，其强大的功能之一就是组件化开发。...无论是基本插槽、具名插槽还是作用域插槽，它们都极大地扩展了Vue组件的使用方式，让开发者能够构建出更复杂且富有表现力的应用。
vue插槽slot学习.xmind
05-29
vue插槽slot学习.xmind
vue插槽
01-07
v-slot 为vue插槽指令 1.匿名插槽/默认插槽 只可以使用一次，由父组件提供样式和内容，子组件只负责显示 2.具名插槽 可以使用多次 插槽内容 3.作用域插槽（带数据的插槽） 在slot上面绑定数据 {{集合.值}} 直接...
Vue插槽的使用
01-07
具名插槽 // input.vue input组件 // home.vue 我是左边的插槽 我是右边的插槽 // 导入组件 import input from '@/components/input' export default { components: { input } } 作用域插槽 把子组件的值传递...
vue插槽slot的简单理解与用法实例分析
10-15
在组件化开发中，有时我们需要在组件内部自定义一些动态内容，这就引出了Vue的插槽（Slot）机制。插槽允许父组件向子组件传递内容，并决定这些内容在子组件内部如何展示。本文将深入探讨Vue插槽的简单理解、分类以及...
iOS 13 SceneDelegate适配
热门推荐
仰望星空的博客
09-24 4万+
Xcode 11新建工程 在Xcode 11 创建的工程，运行设备选择 iOS 13.0 以下的设备，运行应用时会出现黑屏现象。 原因： Xcode 11 默认是会创建通过 UIScene 管理多个 UIWindow 的应用，工程中除了 AppDelegate 外会多一个 SceneDelegate AppDelegate和SceneDelegate这是iPadOS带来的新的多窗口支持的结果，并...
Xcode创建OC项目
最新发布
qq_47703286的博客
11-08 2564
Xcode创建OC项目
Unity3D开发（三）：场景管理插件Scene Manager
445822357
10-05 1552
Unity3d中提供了场景Scene的概念，Scene就是一组相关联的游戏对象的一个集合，通常每个集合就是一个场景，但是也有可能只是一个场景的一部分！ 场景中的游戏对象是任意的，可以是HUD的UI组件，场景地图，模型等等 Unity3d提供了一些切换场景的规则和方法（例如在切换场景时不销毁某些GameObject，同步，异步加载场景API），但是并没有提供一个通用的场景管理的模块（想要做到“通...
iOS 13 Scene Delegate and multiple windows
集腋成裘
02-24 2182
iOS 13 Scene Delegate and multiple windows iOS 13的一大改进就是支持multiple windows（多窗口）功能，虽然多窗口仅在iPadOS上获得支持，但这已经是一个很大到的进步，它将会大大提升一些场景的使用体验。本文将结合WWDC 2019相关topic介绍与多窗口相关的内容。 Scene Delegate 为了实现多窗口功能，苹果修改了使用...
Xcode7  创建纯代码的项目
刘宇(LY)个人笔记
04-13 3794
xcode新建的项目是基于故事版的，但大家开发ios程序时，使用的最多的UI绘制方式依然是基于代码的。他们之间的优缺点在这里就不在赘述了。下面就说一下，怎么在xcode7中新建一个纯代码的项目。1.因为是基于纯代码的项目，那么故事版文件和它对应的视图控制器类便不再需要了。将他们删除2.修改项目的配置文件 Main Interface中的值删除3.用代码将窗口创建出来在这个文件中 添加以下代码
APP的生命周期和UIscene,UIwindow(二)
qq_55655826的博客
03-18 2520
= =将以前收集的资料做个总结 从ios13开始，app的生命周期管理由appdelegate分成了appdelegate和scenedelegate两个文件，前者负责app的启动和结束以及对UIscene对象的管理，后者负责APP的状态切换（not running , inactive, active, background,Suspended）以及相关的方法调用。 康康UIscene的官方描述 为了适应多场景，推出了这个UIscene管理UI的生命周期，每个scene对应一个keywin.
解决Xcode11-beta版本新创建iOS工程低版本黑屏的问题
MeteoriteMan的博客
07-26 4319
大家估计也发现iOS 13或者说是Xcode 11-beta创建iOS工程不一样的地方了. Xcode 10 Xcode 11-beta 可以看得出来,Xcode 11-beta多了一个SceneDelegate.h/SceneDelegate.m 对比一下新旧的Appdelegate.h发现. 旧 @interface AppDelegate : UIResponder <UIAp...
Objective-C入门01：使用Xcode新建一个工程
FF251606的博客
09-10 5688
Objective-C入门教程01：使用Xcode新建一个工程 一、objective-c简介：     Xcode 是 Apple 的集成开发环境，用于 iOS 和 Mac OS X 的开发。Xcode可以直接在App Store中安装，也可以从网络下载或是拷贝过来安装。在 Mac 上安装 Xcode，也会同时安装了 iOS SDK，它包含 iOS 平台的编程接口。
IOS开发实战-Xcode创建HelloWorld项目
BraveWangDev
04-29 1万+
一.创建工程 打开Xcode开发工具, 在Welcome界面选择”Create a new Xcode project”选项 在选择模板窗口,选择”Single View Application” 确定模板后,设置项目相关基本属性: 填写完成后点击Next,选择工程文件存放路径 二,工程结构 创建工程完成后,进入Xcode代码编辑器主页面,模板工程结构如下: ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值