vue菜鸟插槽 slot

最新推荐文章于 2022-01-04 10:18:28 发布
最新推荐文章于 2022-01-04 10:18:28 发布
阅读量272 收藏
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43015261/article/details/108294279
版权

vue插槽

什么情况用slot
把内容传递给子组件
父组件

<template>
<div>

    <head>
        <template v-slot:header>
            <div>头部信息</div>
        </template>
        <template v-slot:content>
            <div>内容信息</div>
        </template>
    </head>
</div>
</template>

<script>
import head from "./components/head";
export default {
    data() {
        return {};
    },
    components: {
        head
    },
};
</script>

<style scoped>
</style>

子组件

<template>
<div>
    <div class="content">
        <p>头部</p>
        <slot name="header"></slot>
        <p>中部</p>
        <slot name="content"></slot>
        <p>底部</p>
    </div>
</div>
</template>

<script>
export default {
    data() {
        return {

        }
    }
}
</script>

<style  scoped>
</style>

如有问题请留言

草根程序员
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue插槽slot学习.xmind
05-29
vue插槽slot学习.xmind
vue插槽slot的简单理解与用法实例分析
10-15
在组件化开发中，有时我们需要在组件内部自定义一些动态内容，这就引出了Vue的插槽（Slot）机制。插槽允许父组件向子组件传递内容，并决定这些内容在子组件内部如何展示。本文将深入探讨Vue插槽的简单理解、分类以及...
vue 插槽
weixin_44202519的博客
01-04 376
1.box-sizing box-sizing:border-box;就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。 2.CSS3 @media 查询 body { background-color:lightgreen; } @media screen and (max-width: 300px) { body { background-color:lightblue; } } 浏览器窗口的宽度小于 300 像素时，背景颜色会变成淡蓝
vue -- slot插件
NDSoumig的博客
05-12 314
slot插件 把父组件的代码放到子组件中进行显示 就用slot插件 例子： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" conte
最简单易懂的 vue 插槽教程
君非道的博客
01-09 1844
一个 slot 标签就是一个插槽，如果没有内容传入，则显示 slot 标签原有的内容，如果有内容插入，则显示插入的内容。 匿名插槽（slot 不带 name 属性），看下面例子： &amp;amp;lt;!-- html部分 --&amp;amp;gt; &amp;amp;lt;body&amp;amp;gt; &amp;amp;lt;div id=&amp;quot;app&amp;quot;&amp;amp;gt;
Vue插槽的理解和使用
bobozai86的博客
04-12 4万+
对于插槽的概念和使用，这是vue的一个难点，这需要我们静下心来，慢慢研究。以下是我这两天通过官网和其他资料的学习和使用总结出来的笔记，如有错误或者有不同见解的，欢迎留言，一起学习。 什么是插槽 插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的&lt...
vue插槽用法
菜鸟搬砖记
05-19 133
vue中插槽主要是用于父组件传递给子组件HTML模板 默认插槽 父组件： <template> <div> <child> <div>父到子的插槽</div> </child> </div> </template> <script> import child from './child' export default { comp
详解vue slot插槽的使用方法
08-30
Vue 中的 Slot 插槽使用方法详解 Vue 中的插槽（Slot）是一种强大的功能，它允许开发者在组件中插入任意的内容，从而提高组件的灵活性和可重用性。下面，我们将详细介绍 Vue 中的插槽使用方法。 1. 单个 Slot ...
vue中的 $slot 获取插槽的节点实例
10-16
今天小编就为大家分享一篇vue中的 $slot 获取插槽的节点实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue学习之slot插槽
01-07
slot插槽 ---------------------------- 123 456 789 //slot比较特殊，所以导入的时候不能直接写slot import slots from @/components/slot export default{ data(){ return{ } }, components:{ ...
Vue 教程（14）—— 插槽
读万卷书，行万里路
06-14 1115
1 插槽内容 Vue 实现了一套内容分发的 API，这套 API 基于当前的&nbsp;Web Components 规范草案，将&nbsp;&lt;slot&gt;&nbsp;元素作为承载分发内容的出口。 它允许你像这样合成组件： &lt;div id="app1"&gt; &lt;navigation-link url="/profile"&gt; Your
vue-cli 工程中 单个slot用法
冲锋
05-01 936
参考vue2.0文档 单个插槽使用 除非子组件模板包含至少一个 &lt;slot&gt; 插口，否则父组件的内容将会被丢弃。 当子组件模板只有一个没有属性的插槽时，父组件传入的整个内容片段将插入 到插槽所在的 DOM 位置，并替换掉插槽标签本身。 最初在 &lt;slot&gt; 标签中的任何内容都被视为备用内容。 备用内容在子组件的作用域内编译，并且只有在宿主元素为空 且没有要插入的内容时才显...
vue插槽的例子
jicongyuan的博客
10-16 261
```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <style> </style> &.
vue插槽slot的简单理解
荤素菜鸟的博客
04-08 90
**先创建一个子组件文件solt.vue** 1.**默认插槽** <template> <div class="solt__body"> <slot></slot> //这个标签的作用就是接受存放父组件传过来的信息数据 </div> </template> <script> export default { } </script> 1.**默认插槽在父组件页面应用father.vue** <templ
slot的使用方法详解
weixin_43550562的博客
10-22 582
插槽的使用其实是很简单，你只需明白以下两点，就很容易理解。 1.插槽是使用在子组件中的， 2.插槽的作用是将父组件中的子组件模板数据正常显示 我现在创建一个demo,结构如下: 这是父组件↓ <template> <div id="app"> 我是父组件 <son> <p style="color:red">我是父组...
Vue.js菜鸟教程自学（一）
NDSoumig的博客
08-09 1万+
导入js: 一、hello vue <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue....
vue-cli 工程中 具名 插槽 slot用法
冲锋
05-01 5354
参考vue2.0文档 具体解释参考文档 简单理解就是 给每一个 slot 一个name属性， 父组件中 使用子组件标签时用的slot=“xxx”, 要跟子组件的name匹配上，才会渲染出来 具名插槽和单个插槽可以共存 具名插槽代码实例: 在父组件中 我现在在 app.vue中 &lt;template&gt; &lt;div id="app"&gt; ...
slot
菜鸟前端的博客
05-31 4098
一、一般定义子组件情况： <body> 　　<div id="app"> 　　　　<child> 　　　　　　<span>123456</span> 　　　　</child> 　　</div> 　　<script> 　　　　new Vue({ 　　　　　　el:'#app', 　　　　　　compon...
Vue中slot的使用（通俗易懂）
热门推荐
zhouzuoluo的博客
06-01 16万+
在vue中使用slot插槽个人理解：是对组件的扩展，通过slot插槽向组件内部指定位置传递内容，通过slot可以父子传参；开发背景：正常情况下,&lt;Child&gt;&lt;span style=”color:red;”&gt;hello world&lt;/span&gt;&lt;/Child&gt;在组件标签Child中的span标签会被组件模板template内容替换掉，当想让组件标签C...
vue slot插槽
最新发布
07-28
Vue中的插槽（Slots）是一种在父组件中将子组件的内容进行分发的机制。通过插槽，我们可以在父组件中定义一些占位符，然后在子组件中填充具体的内容。 在Vue中，插槽有两种类型：具名插槽和默认插槽。 具名插槽允许我们在父组件中使用多个不同的插槽，并且可以根据需要进行分发和填充。我们可以使用`<slot>`元素和`name`属性来定义具名插槽。例如： ```html <!-- 父组件 --> <template> <div> <slot name="header"></slot> <slot></slot> <slot name="footer"></slot> </div> </template> <!-- 子组件 --> <template> <div> <slot name="header"> <!-- 默认插槽内容 --> <h1>默认标题</h1> </slot> <p>子组件内容</p> <slot name="footer"> <!-- 默认插槽内容 --> <p>默认页脚</p> </slot> </div> </template> ``` 在上面的例子中，父组件定义了三个插槽：`header`、默认插槽和`footer`。子组件可以根据需要填充这些插槽，并且如果没有提供相应的内容，那么会显示插槽中的默认内容。 默认插槽是没有名字的插槽，如果在父组件中没有定义具名插槽的话，子组件的内容会被分发到默认插槽中。 除了使用`<slot>`元素和`name`属性来定义插槽，我们还可以使用`<template>`元素和`v-slot`指令来定义和填充插槽。例如： ```html <!-- 父组件 --> <template> <div> <template v-slot:header> <!-- 插槽内容 --> </template> <!-- 默认插槽内容 --> <template v-slot:default> <!-- 插槽内容 --> </template> <template v-slot:footer> <!-- 插槽内容 --> </template> </div> </template> ``` 使用插槽可以使我们的组件更具灵活性，可以根据需要在父组件中定制子组件的部分内容。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值