Vue Slot 层级、作用域详解

最新推荐文章于 2022-07-16 14:08:13 发布
最新推荐文章于 2022-07-16 14:08:13 发布
阅读量3.1k 收藏 1
点赞数
分类专栏： 自己挖的坑 文章标签： Vue Slot v-slot
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/robot7th/article/details/90454491
版权

vue slot插槽的作用域在官方教程中有一条说明：
“父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。”
父级模版可以通过prop把参数传递给子级模版，但是反过来是不推荐的。
插槽v-slot就是用来反向传参的。

首先来看一下层级关系，一下是html页面中的dom元素实例

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Language" content="zh-cn">
        <title>Template</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="components-demo" level="0">
            <im-level-11 title="how are you." level="1">
                {
  { posts[2].title }}
                <im-level-12 :name="posts[1].title" level="1">
                        <template v-slot:default="slotProps">
                            {
  { slotProps.user.firstName }}
最低0.47元/天 解锁文章
actionPig
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue的作用域插槽slot有什么用？
Always-Learning
04-09 537
一、基本使用 由父组件向子组件中传递数据，子组件通过slot进行接收，不传递则显示的是默认的内容。 父组件 <template> <div id="app"> <slotDemo :url="website.url"> {{website.title}} </slotDemo> </div> </template> <script> import slotDemo from
Vue slot插槽 多层组件传递
samll_redhat的博客
09-23 1506
多层组件传递slot。
2020-10-20逆向传值 槽口slot
weixin_48364327的博客
10-20 210
逆向传值 与 槽口slot 今天主要学习了组件的逆向传值，即子传父。还有槽口的使用，将学习流程图绘制如下：
vue 解决position:fixed 遮盖下方元素问题
weixin_40425415的博客
12-23 8363
方法1： 下方的元素第一个设置 margin-top为fixed元素的高度即可。 方法2： 在fixed元素后添加一个空的div盒子，并将高度设置为fixed元素的高度。 延伸扩展：如果fixed高度不确定，该如何处理？ 需要动态获取盒子高度并监听其变化，然后动态设置元素的style。 <div> <div id="header" style="position: fixed"> //设置fixed的元素 </div...
vue slot作用域插槽 slotProps 传值
weixin_45835771的博客
03-25 4382
子组件 <template> <td v-for="column in columns" :key="`${column.key}_${index}`"> <slot v-if="column.slot" :name="column.key" v-bind:record="item" :index="index" ></slot> </td> </template>
【Vue3】slot插槽之作用域插槽【基于v-slot传参】
weixin_43343144的博客
10-18 3364
作用域插槽的作用就是：子组件【插槽位置】向【父组件实现位置】传递参数的功能 父组件 <template> <img alt="Vue logo" src="./assets/logo.png"> <HelloWorld msg="Welcome to Your Vue.js App"> <!--这里的data需从子组件的插槽中传入获取--> <template v-slot="data".
详解Vue组件之作用域插槽
10-17
主要介绍了Vue组件之作用域插槽，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
Vue作用域插槽实现方法及作用详解
11-19
本文将深入探讨Vue的作用域插槽（Scoped Slots），以及如何实现和使用它们。 首先，我们要区分三种类型的插槽：默认插槽、具名插槽和作用域插槽。默认插槽是最基础的，它没有特定的名字，通常用于传递通用的、不...
详解vue 中 scoped 样式作用域的规则
10-14
然而，**组件复用**时需要注意，无论组件在什么层级被复用，它们的作用域都是相同的。这意味着如果一个组件在页面上被多次使用，可能会出现样式冲突，因为相同的样式选择器会影响到所有复用的实例。 Vue 中 `scoped...
内置组件 -slot讲解
大灰狼的小绵羊哥哥的博客
07-21 1565
slot是标签的内容扩展，也就是说你用slot就可以在自定义组件时传递给组件内容，组件接收内容并输出。 转自http://jspang.com/2017/04/09/vue2_4/4/ 先来定义一个的组件，这个组件用来显示博主的一些信息。 我们在Vue 构造器里的data中给出了信息，信息如下：（博客地址，网名，使用技能） 1234567data:{    jspang
Vue 组件利用Slot插件作用域的参数传递
rocklee的专栏
07-16 5492
下面我做个例子，比如我的组件里面的查询栏里面开了一个插槽，希望调用方引用我这组件时可以增加状态查询的输入，并且将查询参数queryParam传过去...
Vuetify组件中常见的v-slot:activator=“{ on, attrs }“是什么意思？
weixin_44710964的博客
07-18 9620
在使用Vuetify组件时，常看到v-slot:activator="{ on, attrs }"以及插槽中的v-bind="attrs" v-on="on" 例如： 由于之前写代码时少有这种写法而且是第一次遇见，用久了难免想知道是什么意思。因为国内没有相关的问题，于是自己去国外网站上搜了搜然后看了下Vue的文档并加上了自己的理解： 新写法 首先这个template是v-menu的插槽。v-slot:activator是具名插槽的新写法，旧写法slot="activator"在vue 2.6.0 起被废
vue 组件传值 父子组件传值，兄弟组件传值
qq_43437571的博客
09-10 501
父子组件中的传值 父向子 v-bind props <!-- 组件使用v-bind传值 --> <router :msg="msg"></router> 子组件: <p>子组件 ----- {{msg}}</p> props: ["msg"], //props接收 props:验证 props: { // fooA只接受数值类型的参数 fooA: Number, // fooB可以接受字符串和数值类型的参
slot插槽之作用域
lee647的博客
03-05 379
父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。因此在父页面引用的组件包含的插槽可以访问到父页面的数据，访问不到子组件的数据 需要将子组件的数据作为slot的一个属性绑定上去 父页面模板引用处接收 或者 都可以达到相同的输出效果 这个定义的模板比较特殊，只有默认模板可以直接将接收值绑定在组件标签上，通用是绑定在template上 在父页面接收的数据格式也要注意一下，是bind绑定的name为属性值，后面的数据为value的一个对象 ...
Vue 实现 slot 多层嵌套
asing1elife's blog
09-19 1万+
Vue 实现 slot 多层嵌套 在引用一些框架时，通常他们自己就已经有插槽，但有时需要对插槽进行拓展 更多精彩 更多技术博客，请移步 asing1elife’s blog 定义基础组件，向插槽中再插入一个插槽 在基础组件中引入了 Mint-UI 的 mt-header 组件 并通过其提供的具名插槽向组件右侧插入内容 但该组件是我们自定义的，我们并不知道组件被调用时会被插入什么内容 所以...
vue使用插槽分发内容slot的用法
热门推荐
kingov
10-20 5万+
将父组件的内容放到子组件指定的位置叫做内容分发 //在父组件里使用子组件 &amp;lt;son-tmp&amp;gt; &amp;lt;div&amp;gt;我是文字，我需要放到son-tmp组件里面制定的位置&amp;lt;/div&amp;gt; &amp;lt;/son-tmp&amp;gt; 单个插槽 父组件app.vue &amp;lt;template&amp;gt; &am
关于vue slot 的多级传递使用
xuxu_qkz的博客
07-19 1万+
关于vue slot 的多级传递使用 关于slot 以及scope-slot的基本使用，官方文档已经有了详细的介绍：点击这里查看，这里就不复述了。 但是在实际的使用过程中，常常会出现外部组件内容需要多级嵌套传递到目标组件，那么slot可以如何实现呢？ 现在假设有A，B，C三个组件，层级关系为A&amp;gt;B&amp;gt;C(爷爷，父亲，儿子) C: &amp;lt;div&amp;gt; C组...
vue3slot作用域插槽
最新发布
08-24
Vue 3中的作用域插槽是一种功能强大的特性，它允许你在父组件中向子组件传递内容，并且还能让子组件对这些内容进行处理和渲染。 使用作用域插槽，你可以在子组件中定义插槽的具体渲染规则，并且可以在父组件中通过具名插槽的方式向子组件传递内容。子组件可以通过`v-slot`指令来接收父组件传递的内容，并在插槽内部进行渲染。 在Vue 3中，作用域插槽的语法有所改变。你可以使用`<slot>`元素加上`name`属性来定义具名插槽，在父组件中使用`v-slot`指令来向该具名插槽传递内容。例如： ```html <!-- 子组件 --> <template> <div> <slot name="header"></slot> <slot></slot> <slot name="footer"></slot> </div> </template> <!-- 父组件 --> <template> <div> <child-component> <template v-slot:header> <!-- 这里的内容将会传递给子组件的具名插槽header --> </template> <!-- 这里的内容将会传递给子组件的默认插槽 --> <template v-slot:footer> <!-- 这里的内容将会传递给子组件的具名插槽footer --> </template> </child-component> </div> </template> ``` 在Vue 3中，还支持使用缩写语法来定义默认插槽和具名插槽。例如，`<template v-slot:header>`可以简写为`<template #header>`，`<template v-slot:footer>`可以简写为`<template #footer>`。 通过使用作用域插槽，你可以更灵活地向子组件传递内容，并让子组件有更大的自由度来处理和渲染这些内容。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值