Vue3 slot插槽多层传递

这篇具有很好参考价值的文章主要介绍了Vue3 slot插槽多层传递。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


如果你想传递一个slot,从爷到孙的传递, 看了网上的一些方案,依赖注入都来了,其实没那么麻烦

直接上代码

最顶层组件,插入一个按钮到 slot name为 btn的 插槽里面,Button接收一个row的参数,参数可能有多个,这里 用了 { row } 只取 row

<topComponent>
	<template #btn="{ row }">
		<Button :row="row"/>
	</template>
</topComponent>

在中间组件,这里把插入一个 插槽 插入到 slot name为 btn的 插槽里面,它接收一个 row的参数, 从 v-slot:btn / #btn 里面来的

slot的参数传递是从下往上的,通过 #btn=“xxx” xxx来接收

<middleComponent>
	<template #btn="row">
	 	<slot name="btn" :row="row"></slot>
	</template>
</middleComponent>

最底层组件,仅有一个插槽,向上传递 item的值 为 row的参数。

<bottomComponent>
	<slot name="btn" :row="item"></slot>
</bottomComponent>

以上。
从顶层组件插入的Button组件,就能获取到最底层组件传递过来的值,Vue3本身就支持这种 slot 跨层传递,不需要那些额外的骚操作 XD文章来源地址https://www.toymoban.com/news/detail-613480.html

到了这里,关于Vue3 slot插槽多层传递的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue插槽 slot 标签

    Vue 插槽 slot 标签: 作用:让父组件可以向子组件指定的位置插入一段 html 结构,也属于一种组件之间的通信方式,适用于父传子  不使用插槽: 创建 List 组件,接收父元素传递的数据,用于显示分类列表。 在 Home 页面中引用 List 组件,并传递对应的数据。 注 :组件会根据

    2024年02月11日
    浏览(40)
  • Vue-插槽(Slots)

    在Vue.js中,插槽是一种强大的功能,它允许你创建可重用的模板,并在使用该模板的多个地方插入自定义内容。 插槽为你提供了一种方式,可以在父组件中定义一些“插槽”,然后在子组件中使用这些插槽,插入自己的内容。 2.1 默认插槽(Default Slots) 这是最常见的插槽类

    2024年01月22日
    浏览(39)
  • Vue slot 插槽使用详解

    在当今Web开发领域中,构建交互性强、可复用且易于维护的用户界面是至关重要的。而Vue.js作为一款现代化且流行的JavaScript框架,正是为了满足这些需求而诞生。它采用了MVVM架构模式,并通过数据驱动和组件化的方式,使我们能够更轻松地构建出优雅而高效的Web应用程序。

    2024年01月16日
    浏览(44)
  • vue知识点————插槽 slot

    slot 插槽 在父组件中引用的子组件 在父组件中写入百度 可在子组件slot插槽中展示出 父组件 子组件 父组件 子组件 这里父组件可以访问父组件的数据并且可在slot中展示到,不可以在父组件中访问子组件的数据,就相当于父组件百度—{{ user.name }}{{ url }} 这里的url是访问不到的

    2024年02月09日
    浏览(40)
  • 如何使用Vue的插槽(slot)语法?

    Vue.js 是一个流行的 JavaScript 框架,用于构建动态和交互式的用户界面。它的模板语法提供了许多功能,其中之一就是插槽(slot)语法。 插槽(slot)是 Vue.js 模板中一种非常有用的机制,它允许你在一个组件中插入内容,然后在另一个组件中使用这些内容。这个机制非常灵活

    2024年02月08日
    浏览(49)
  • Vue中的ajax和slot插槽

    在前后端分离项目中,解决跨域问题是一个常见的需求。下面列举了几种常用的跨域解决方法: CORS(跨域资源共享):这是最常用且推荐的跨域解决方案。通过在服务器端设置响应头,允许特定的源(域名、协议、端口)访问资源。在后端服务器上进行配置即可实现跨域请

    2024年02月10日
    浏览(45)
  • Vue 3 中的插槽(Slots)用法

    插槽(Slots)是 Vue 组件中一种非常有用的功能,用于在父组件中向子组件传递内容。Vue 3 引入了 script setup 语法,使得组件的写法更加简洁和易读。在本篇博客中,我们将探讨在 Vue 3 中使用插槽的不同方式,包括默认插槽、具名插槽以及作用域插槽。 默认插槽是 Vue 组件中最

    2024年02月15日
    浏览(37)
  • Vue中的Ajax 配置代理 slot插槽

    本案例需要下载 axios 库 npm install axios 配置参考文档 Vue-Cli devServer.proxy vue.config.js 是一个可选的配置文件,如果项目的 (和 package.json 同级的) 根目录中存在这个文件,那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段,但是注意这种写法需要你严格遵照

    2024年02月09日
    浏览(47)
  • FE_Vue学习笔记 插槽 slot

    插槽分为匿名插槽、具名插槽、作用域插槽。子组件中: 匿名插槽只能有一个; 可以有多个具名插槽; 作用域插槽中可以有匿名插槽和具名插槽。 当项目中一个组件可以多次复用时,我们可以把这个组件封装成单独的 .vue 文件,从而可以在不同的页面中引入该组件,从而实

    2024年02月04日
    浏览(33)
  • VUE--插槽slot(将父级的模块片段插入到子级中)

    组件可以接收任意类型的JS值作为props,但我们想要为子组件传递一些模板片段,并在子组件中进行渲染时,此时可以采用插槽slot来实现 简单来说,插槽时组件内留一个或多个插槽的位置,供组件传递对应的模板代码(传递任意HTML的结构),插槽的存在使得组件变的更为灵活

    2024年01月22日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包