FE_Vue学习笔记 插槽 slot

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

插槽分为匿名插槽、具名插槽、作用域插槽。子组件中:

  1. 匿名插槽只能有一个;
  2. 可以有多个具名插槽;
  3. 作用域插槽中可以有匿名插槽和具名插槽。

当项目中一个组件可以多次复用时,我们可以把这个组件封装成单独的.vue文件,从而可以在不同的页面中引入该组件,从而实现组件的复用,我们称这个.vue文件为子组件,需要用到这个子组件的页面我们称为父组件。

当子组件中可以决定自己的大概结构,但是有些内容的展示与否,或者展示的形式子组件不能决定,需要由父组件来决定之后传给子组件时,需要使用到作用域插槽(匿名插槽和具名插槽辅助作用域插槽),父组件决定内容,子组件决定位置。

子组件通过slot为父组件传递过来的内容进行占位,父组件将数据传递过来填充slot

1 匿名插槽 - 只能有一个

FE_Vue学习笔记 插槽 slot

2 具名插槽-可以有多个

父组件填充内容, 父组件通过 v-slot:[name] 的方式指定到对应的插槽中。slot存在于子组件,v-slot在父组件,最终页面展示结果是父组件。
FE_Vue学习笔记 插槽 slot

3 作用域插槽

作用域插槽其实就是带数据的插槽,即带参数的插槽,简单的来说就是子组件提供给父组件的参数,该参数仅限于插槽中使用,父组件可根据子组件传过来的插槽数据来进行不同的方式展现和填充插槽内容。

  1. 子组件存放一个带数据的插槽
  2. 父组件通过 “slot-scope” 来接收子组件传过来的插槽数据,再根据插槽数据来填充插槽的内容
    FE_Vue学习笔记 插槽 slot

作用域插槽绑定了一套数据,父组件可以拿来用。于是,情况就变成了这样:样式父组件说了算,但内容可以显示子组件插槽绑定的
我们再来对比,作用域插槽跟单个插槽和具名插槽的区别,因为单个插槽和具名插槽不绑定数据,所以父组件提供的模板一般要既包括样式又包括内容,而作用域插槽,父组件只需要提供一套样式(在确实用作用域插槽绑定的数据的前提下)。文章来源地址https://www.toymoban.com/news/detail-442579.html

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

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

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

相关文章

  • Vue slot 插槽使用详解

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

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

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

    2024年02月09日
    浏览(39)
  • Vue3 slot插槽多层传递

    如果你想传递一个slot,从爷到孙的传递, 看了网上的一些方案,依赖注入都来了,其实没那么麻烦 最顶层组件,插入一个按钮到 slot name为 btn的 插槽里面,Button接收一个row的参数,参数可能有多个,这里 用了 { row } 只取 row 在中间组件,这里把插入一个 插槽 插入到 slot n

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

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

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

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

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

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

    2024年02月15日
    浏览(36)
  • 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日
    浏览(46)
  • 【Vue3 第十九章】插槽 slot

    数字化管理平台 Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus 权限系统-商城 个人博客地址 在某些场景中,我们可能想要为子组件传递一些模板片段,让子组件在它们的组件中渲染这些片段。这就用到了插槽。 插槽是子组件中的提供给父组件使用的一个占位符,用 slot 表示,父组件可以

    2024年02月09日
    浏览(38)
  • Vue3——第十三章(插槽 Slots)

    这里有一个 FancyButton 组件,可以像这样使用: 而 FancyButton 的模板是这样的: slot 元素是一个插槽出口 (slot outlet),标示了父元素提供的插槽内容 (slot content) 将在哪里被渲染。 最终渲染出的 DOM 是这样: 通过使用插槽, FancyButton 仅负责渲染外层的 button (以及相应的样式),而

    2024年02月07日
    浏览(51)
  • 基于vue和element-ui的表格组件,主推数据渲染,支持内容和方法灵活绑定,提供动态具名插槽自定义内容

            组件名为commonTable,主要是基于element-ui中的表格组件进行二次封装的组件,集成了常用的表格功能,除默认内容的显示外,还包括以下几点:         1. 状态的筛选和显示;         2. 操作按钮的显示和方法绑定;         3. 自定义具名插槽内容的封装;      

    2024年02月07日
    浏览(50)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包