vue插槽初步了解

最新推荐文章于 2022-11-08 17:03:09 发布
最新推荐文章于 2022-11-08 17:03:09 发布
阅读量99 收藏
点赞数
分类专栏： 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 431
由SwiftUI管理生命周期的项目，不仅默认不提供AppDelegate，也不会提供SceanDelegate。本节演示如何往项目中导入SceanDelegate。 使用SceanDelegate，可以很方便的管理场景生命周期，并且可以处理来自快捷菜单的跳转。在打开的文件模板窗口中，选择此处的模板。 点击下一步按钮，进入下一步设置页面。 在文件名称输入框里，输入文件的名称。 然后点击创建按钮，完成SceanDelegate.swift文件的创建。 接着开始编写代码，实现Sc..
vue中插槽的详解
m0_71345904的博客
08-10 2666
​插槽（Slot）是 vue 为组件的封装者提供的能力。允许开发者在封装组件时，把不确定的、希望由用户指定的部分定义为插槽。可以把插槽认为是组件封装期间，为用户预留的内容的占位符
11纯代码 oc xcode_iOS开发之Xcode11后纯代码项目工程设置
weixin_39713335的博客
12-22 205
Xcode 11发布之后，新建iOS项目工程时，会有很多变化，最大的变化是多了文件SceneDelegate，此时如果希望通过纯代码设置界面，流程与以往会有一些不一样，本文简单介绍一下。纯代码的条件删除Main Interface中的Main，同时需要删除info.plist中的如下代码UISceneStoryboardFileMain项目文件变化AppDelegate.swift文件负责App的...
iOS13 SceneDelegate
了凡
12-24 1106
SceneDelegate 如果使用当前最新版本的Xcode新建项目，项目中会多出一个SceneDelegate.swift的文件，并且AppDelegate.swift的内容也会有所不同 AppDelegate的内容，可能如下： @UIApplicationMain class AppDelegate: UIResponder, UIApplicationDelegate { var ope...
iOS13 (Xcode11）一些新特性
jeversonjee's blog
07-08 326
SeceneDelegate SceneDelegate!!! 除了多了个SceneDelegate文件，查看Info.plist 发现多了个有关Application Scene Mainfest配置属性。 代码变化 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { // Override point for custom
ios app开发学习笔记一
Annie Li的博客
03-17 188
IOS App 窗口结构图 ios13新建的工程，跟ios12有些不同，需要做一些配置才可以走appDelegate。配置方式如下： 删除info.plist中Application Scene Manifest选项，同时，文件SceneDelegate可删除可不删除。 注释掉AppDelegate.m中的两个方法： (UISceneConfiguration *)application:...
vue插槽讲解
幸运小男神的博客
04-02 291
一、插槽使用 因为插槽是在组件的基础上衍生的，因此需要创建一个组件并注册引用。 <slot>元素可以将插槽内容渲染出来 二、内容覆盖 父级组件中的插槽内容会覆盖子级组件中的插槽内容。 例如： 子组件插槽中写上一句话，父组件插槽内容什么也不写，渲染出来的内容为子组件的插槽内容。 子组件插槽中写上一句话，父组件插槽中也写上一句话，渲染出来的内容为父组...
Vue插槽原理与用法详解
10-17
Vue.js 是一款流行的前端框架，其强大的功能之一就是组件化开发。...无论是基本插槽、具名插槽还是作用域插槽，它们都极大地扩展了Vue组件的使用方式，让开发者能够构建出更复杂且富有表现力的应用。
vue插槽slot学习.xmind
05-29
vue插槽slot学习.xmind
vue插槽
01-07
v-slot 为vue插槽指令 1.匿名插槽/默认插槽 只可以使用一次，由父组件提供样式和内容，子组件只负责显示 2.具名插槽 可以使用多次 插槽内容 3.作用域插槽（带数据的插槽） 在slot上面绑定数据 {{集合.值}} 直接...
ios 使用xcode11 新建项目工程的步骤详解
08-19
主要介绍了ios 使用xcode11 新建项目工程 （值得注意的问题）,本文分步骤通过图文的形式给大家展示，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
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 2527
Xcode创建OC项目
SwiftUI入门到实战课程 [2023版]
12-10
【课程特点】1、231节大容量课程：包含了SwiftUI的大部分知识点，详细讲解SwiftUI的方方面面；2、15个超级精彩的实例：包含美食、理财、健身、教育、电子商务等各行业的App实例；3、创新的教学模式：手把手教您SwiftUI用户界面开发技术，一看就懂，一学就会；4、贴心的操作提示：让您的眼睛始终处于操作的焦点位置，不用再满屏找光标；5、语言简洁精练：瞄准问题的核心所在，减少对思维的干扰，并节省您宝贵的时间；6、视频短小精悍：即方便于您的学习和记忆，也方便日后对功能的检索；7、齐全的学习资料：提供所有课程的源码，在Xcode 11 + iOS 13环境下测试通过； 更好的应用，更少的代码！SwiftUI是苹果主推的下一代用户界面搭建技术，具有声明式语法、实时生成界面预览等特性，可以为苹果手机、苹果平板、苹果电脑、苹果电视、苹果手表五个平台搭建统一的用户界面。SwiftUI是一种创新、简单的iOS开发中的界面布局方案，可以通过Swift语言的强大功能，在所有的Apple平台上快速构建用户界面。 仅使用一组工具和API为任何Apple设备构建用户界面。SwiftUI具有易于阅读和自然编写的声明式Swift语法，可与新的Xcode设计工具无缝协作，使您的代码和设计**同步。自动支持动态类型、暗黑模式、本地化和可访问性，意味着您的**行SwiftUI代码已经是您编写过的非常强大的UI代码了。 
Unity3D开发（三）：场景管理插件Scene Manager
445822357
10-05 1535
Unity3d中提供了场景Scene的概念，Scene就是一组相关联的游戏对象的一个集合，通常每个集合就是一个场景，但是也有可能只是一个场景的一部分！ 场景中的游戏对象是任意的，可以是HUD的UI组件，场景地图，模型等等 Unity3d提供了一些切换场景的规则和方法（例如在切换场景时不销毁某些GameObject，同步，异步加载场景API），但是并没有提供一个通用的场景管理的模块（想要做到“通...
iOS13生命周期的改动
MeteoriteMan的博客
09-07 8290
大家都知道,应用生命周期这个东西,一直到目前的iOS 12这个版本都是在AppDelegate里头(也就是UIApplicationDelegate协议里头) managing_your_app_s_life_cycle iOS 13以下生命周期 对应到方法就是一些AppDelegate里头的方法以及一些可以注册监听的通知. 然而,到了iOS 13(目前还是beta版本,本来不想写这篇文章的...
程序员合同范本
最新发布
07-18
【作品名称】：程序员合同范本 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值