vue中插槽的使用

最新推荐文章于 2024-06-28 18:39:53 发布
最新推荐文章于 2024-06-28 18:39:53 发布
阅读量218 收藏 1
点赞数
分类专栏： Vue 随笔
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ZHXT__/article/details/106767689
版权
Vue 同时被 2 个专栏收录
61 篇文章 3 订阅
订阅专栏
随笔
30 篇文章 0 订阅
订阅专栏
  • 对于vue中插槽相比大家都不陌生, (有具名和非具名)
    非具名插槽直接在里面写入slot标签即可

vue插槽官网
在这里插入图片描述

  • 主要的写法由于版本的变动主要可分为两种
    在具名插槽时, 可变成,使用 template, v-slot的形式(只有在默认没有名字的slot是, v-slot才能用在组件上) 可以缩写为’#'
    在这里插入图片描述
  • 我还是比较喜欢第一种,感觉格式比较统一
    在这里插入图片描述

还有一个就是插槽的作用域, 比如在插槽中写了一些数据的属性,
在组件引入时, 想调用插槽中的属性
在这里插入图片描述

其中里面的’:data’,最好写成属性名一样的,保证统一性(slot-scope在后面的版本废弃, 直接使用v-slot:default形式)
在这里插入图片描述

ZH_TX
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 插槽的使用
程序员小哲的博客
10-09 2317
父组件 <template> <div id="app"> <HelloWorld1> <template v-slot:s1> {{ width }} </template> <template v-slot:s2> {{ hight }} </template> </HelloWorld1> &lt
Vue中插槽的使用
TesuZer的博客
12-08 513
## Vue插槽使用 概述 插槽就是子组件中用slot标签定义的预留位置，可以设置name属性，也可以不设置name属性，设置name的叫具名插槽，不设置name的的叫不具名插槽，在父组件中使用子组件时候可以在使用子组件的标签内通过声明插槽名或不声明插槽名的方式往子组件中的具名插槽或者不具名插槽写入html代码。 插槽使用的关键在于：在父组件中使用子组件标签的时候可以往子组件内写入html代码。 ...
Vue系列之插槽（slot）详解
热门推荐
老__L的博客
03-01 4万+
插槽（Slot）是 Vue 提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性。插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制其实就是在子组件中定义插槽时，给对应的插槽分别起个名字，方便后边插入父组件将根据name来填充对应的内容。作用域插槽就是实现在子组件自行决定自己要显示什么内容动态指令参数也可以用在 v-slot 上，来定义动态的插槽名
vue3插槽的使用
最新发布
qq_47040462的博客
06-28 510
作用域插槽可以接收来自子组件的数据，使插槽内容能基于这些数据动态变化。默认插槽是最基本的形式，用于插入任何未明确命名的内容。通过合理使用插槽，你可以设计出高度可复用和灵活的组件。具名插槽允许你有选择性地插入内容到组件的特定位置。
详解vue slot插槽的使用方法
08-30
当我们在组件中使用这个 Slot 时，这两个段落将被替换掉。 2. 具名 Slot 具名 Slot 是一种特殊的 Slot，它允许开发者在组件中插入多个 Slot，每个 Slot 都有一个唯一的名称。例如，在上面的代码中，我们定义了一个...
Vue插槽的使用
01-07
具名插槽 // input.vue input组件 // home.vue 我是左边的插槽 ...把子组件的值传递到父组件使用 // 子组件 export default { data () { return { user: { name: 'jack' } } } } // 父组件 // #header='{
详解vue使用插槽分发内容slot的用法
10-17
主要介绍了vue使用插槽分发内容slot的用法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
详解Vue中使用插槽（slot）、聚类插槽
10-17
主要介绍了Vue中使用插槽（slot）、聚类插槽，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
10-15
在子组件中，我们可以将数据作为prop传递给插槽，然后在父组件中使用`slot-scope`来访问这些数据。自Vue 2.5.0+起，`slot-scope`可以用于任何元素或组件，而不仅仅是`<template>`。以下是一个作用域插槽的例子： ``...
Vue报错之 [Vue warn]: Property or method "list" is not defined on the instance
ZHXT__的博客
09-01 1万+
如图: 我的过来发现了是自己下开始写了个list 数组,后面由于加了个s, 而使用时 还是用了 {{list}}, 所以出现了这个问题, 主要还是命名这个东西,想好了就别改了, 后面突然想改的话,可能引发一系列的错误, 如果要改,可以先ctrl+f找找,重名的做好一改全改的准备 ...
Vue踩坑 之 vue-router 一些用法(router routes route)的大坑
ZHXT__的博客
09-09 6300
路由,管理,就像管理好各种组件的逻辑跳转一样, 将本来散乱的组件,组织起来,构建成一个协调的有机体, router-view 与router-link 这两个标签 router-link, 本身默认是是一个a标签 可以通过tag ,来改变标签属性,例如**tag=‘button’**时,就是一个按钮的样式了, 值得一说的是我们添加link, 不就是为了跳转吗,这里href 变成了 t...
vue 有关于命名大小写的问题
ZHXT__的博客
10-29 5108
记录一下命名的的一些坑 组件命名的大小写 组件名大小写 定义组件名的方式有两种： 使用 kebab-case Vue.component('my-component-name', { /* ... */ }) 当使用 kebab-case (短横线分隔命名) 定义一个组件时， 也必须在引用这个自定义元素时使用 kebab-case，例如<my-component-name>。 使...
router-link 与router-view
ZHXT__的博客
06-15 5049
在Vue中这两者相互依存, router-link 对应 html 中的a 标签,但是与a 标签不同的是,跳转的时候并不会刷新页面, 而router-view 相当于router-link的承载页面,用于展示router-link 的的内容 官网 router-link 的一些用法: props: to ...
Vue-cli 3相关配置操作记录( 目录结构)
ZHXT__的博客
08-24 4305
–谁的人生不是经历苦难一步一步躺过来的,或许只有痛苦才能让人成长吧 加油吧,前行的道路纵然坎坷,终有一天希望会来到我的身边. 终于将学了这么久,踉踉跄跄来到了Vue这里,记录一下我今天所学的吧; 1.首先 在命令行输入npm install -g @vue/cli 值得一提的是,这里所先是在安装node.js 的基础下完成的,终端最好也在管理员的模式下进行的,不能可能会出现请求不允许的情况, ...
Vue 踩坑之 Failed to generate render function
ZHXT__的博客
08-03 3678
一次在使用v-model 是 的报错记录; v-model 可以在表单元素中实现双向数据绑定的方法; 在使用v-model时,由于一些不好的习惯将其写成了 v-model: n1 导致报错了,经过多次寻找发现是应该写成 ;v-model="n1", 实际上,有时就是因为一些微不足道的错误一点一点的积累,导致后期的bug连连, 有时我们的人生何尝不是不是如此, 就是这样没有重视起来, 导致在...
[vue报错]之Computed property "XXX" was assigned to but it has no setter.
ZHXT__的博客
12-18 3281
首先定位可以知道的是: 在使用computed的时候出现的问题: 这里提示我们需要使用setter, 我也是一脸懵逼, 什么是setter, computed为什么需要setter, 和我有什么关系, 带着这个疑问我们打开vue 的官网, 毕竟遇到问题, 先看官网文档 我们发现: vue 关于 computed的说明 明确一点的是, computed中, 可以设置两个属性, 一个get , 一...
Vue 报错(样式绑定) [Vue warn]: Property or method "sty" is not defined on the instance but referenced
ZHXT__的博客
09-08 3041
分享下我遇到的错误,也是记录下,我遇到的问题; vue 绑定 class 与style 遇到的问题 我的代码时这样的, 把vue实例中sty 注释掉了, 这里就发生了这样的报错, 我的原意是想测试下.在style标签写的是否生效: 所以有两种思路, 一是 把 class 其前面的 : 给删了,自然会报错, 二 是 把 绑定的class 在进行补全; :class="...
import 与 require 使用区别(以及路由懒加载)
ZHXT__的博客
10-23 1940
这里指的是JS 中的使用, 虽然其他的语言也有引入的,(如Python) 首先: 两者 的区别就是 : import 是 ES6 中利用模块化,而使用的 而 require ,早一些,在node 中ADM 的引入方式; 两者的功能是相同的, 只是使用方式上有一些细微的差别,需要注意下; require是赋值过程，其实require的结果就是对象、数字、字符串、函数等，再把require的结果...
vue中插槽的使用场景
09-15
插槽在Vue中的使用场景非常广泛。它们可以用于实现组件之间的内容分发和复用，让我们能够更灵活地组合和定制组件。 以下是一些Vue中插槽的使用场景： 1. 在父组件中定义了一些内容，但希望子组件能够根据需要插入...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值