前几篇的内容都是父子组件通过属性传值或者事件传值这样的. 本篇来学习父组件在调用子组件时, 如果想要给子组件传递特定的内容 (dom) , 则可通过 slot 这个设计来轻易实现哦.

例如现在有这样一个场景:

组件复用

<!DOCTYPE html>

<html lang="en">

<head>

  <title>组件复用</title>

  <script src="https://unpkg.com/vue@3"></script>

</head>

<body>

  <div id="root"></div>

  <script>

    const app = Vue.createApp({

      template: `

      <Son />

      <Son />

      `

    })

    app.component('Son', {

      methods: {

        handleClick () {

          alert(666)

        }

      },

      template: `

      <div>

        <input />

        <div @click="handleClick">提交</div>

      </div>

      `

    })

    const vm = app.mount('#root')

  </script>

</body>

</html>

slot 初识

在父组件中, 调用了 2 次 Son 组件, 但咱希望第一次的是个 div, 第二次是个 button 的效果, 即可使用 slot 这种设计在父组件中调用子组件时给它 "增加内容":

<!DOCTYPE html>

<html lang="en">

<head>

  <title>slot</title>

  <script src="https://unpkg.com/vue@3"></script>

</head>

<body>

  <div id="root"></div>

  <script>

    const app = Vue.createApp({

      template: `

      <son>

        <div>提交</div>

      </son>

      <son>

        <button>提交</button>

      </son>

      `

    })

    app.component('son', {

      methods: {

        handleClick () {

          alert(666)

        }

      },

      template: `

      <div>

        <input />

        <span @click="handleClick">

          <slot></slot>

        </span>

      </div>

      `

    })

    const vm = app.mount('#root')

  </script>

</body>

</html>

简单来梳理这个 slot 的使用流程则是:

  • slot 的能实现父组件在调用子组件时, 直接往里面写内容 dom
  • 子组件命名要小写, 父组件在调的时候以双标签的方式往里面添加 dom
  • 子组件直接用 slot 这个双标签进行引用即可, 但其不能绑事件, 但可通过外包一层正常标签即可

slot 数据作用域

通常在组件通信中, 传递的数据是通过 data ( ) 来做驱动的, 这同样也带来了一个作用域的问题如下:

<!DOCTYPE html>

<html lang="en">

<head>

  <title>slot 数据作用域</title>

  <script src="https://unpkg.com/vue@3"></script>

</head>

<body>

  <div id="root"></div>

  <script>

    const app = Vue.createApp({

      data () {

        return { text: '提交' }

      },

      template: `

      <son>

        <div>{{text}}</div>

      </son>

      <son>

        <button>{{text}}</button>

      </son>

      `

    })

    app.component('son', {

      data () {

        return { text: '点击'}

      },

      methods: {

        handleClick () {

          alert(666)

        }

      },

      template: `

      <div>

        <input />

        <span @click="handleClick">

          <slot>{{text}}</slot>

        </span>

        <div>{{text}}</div>

      </div>

      `

    })

    const vm = app.mount('#root')

  </script>

</body>

</html>

父子组件都用到了 text 这个变量, 但其作用域是不同的, 我们可以看到在父组件这里, text 用的是父组件的数据.

template: `

      <son>

        <div>{{text}}</div>

      </son>

      <son>

        <button>{{text}}</button>

      </son>

      `

    })

而在子组件这里, slot 里面的 text 也是用父组件数据, 但 slot 外面的 text 则用的是子组件自己的数据.

template: `

      <div>

        <input />

        <span @click="handleClick">

          <slot>{{text}}</slot>

        </span>

        <div>{{text}}</div>

      </div>

      `

小结

最后来对本篇对 slot 的基本概念和使用做一个总结梳理如下:

  • slot 的能实现父组件在调用子组件时, 直接往里面写内容 dom
  • 子组件命名要小写, 父组件在调的时候以双标签的方式往里面添加 dom
  • 子组件直接用 slot 这个双标签进行引用即可, 但其不能绑事件, 但可通过外包一层正常标签即可
  • 父模板调用的数据属性, 用的是父模板数据属性, 子模板调用的数据属性, 用的是子莫不数据属性

vue3 基础-slot 插槽的更多相关文章

  1. VUE3 之 作用域插槽 - 这个系列的教程通俗易懂，适合新手

    1. 概述 破窗效应告诉我们: 当一个建筑物窗户的玻璃完好无损时,很少有人想去破坏它,当有一个人破坏了一块窗户的玻璃,其他窗户的玻璃也很快会被人破坏. 同理,一个很干净的地方,人们不好意思去丢垃圾,但 ...

  2. Vue结合slot插槽分发父组件内容实现高度复用、更加灵活的dialog组件

    之前写过一篇关于vue实现dialog会话框组件的文章(http://www.cnblogs.com/fozero/p/8546883.html)[http://www.cnblogs.com/foz ...

  3. Vue slot插槽

    插槽用于内容分发,存在于子组件之中. 插槽作用域 父级组件作用域为父级,子级组件作用域为子级,在哪定义的作用域就在哪. 子组件之间的内容是在父级作用域的,无法直接访问子组件里面的数据. 插槽元素 &l ...

  4. vue slot插槽的使用

    slot插槽的使用场景 父组件向子组件传递dom时会用到插槽   作用域插槽:当同一个子组件想要在不同的父组件里展示不同的状态,可以使用作用域插槽.展示的状态由父组件来决定   注:想要修改父组件向子 ...

  5. Vue slot插槽内容分发

    slot插槽使用 使用场景,一般父组件中又一大段模板内容需要运用到子组件上.或者更加复杂的,子组件需要运用到父组件大段模板内容,而子组件却不知道挂载的内容是什么.挂载点的内容是由父组件来决定的. Sl ...

  6. vue中的slot插槽

    插槽,也就是slot,是组件的一块HTML模板,这块模板显示不显示.以及怎样显示由父组件来决定. 实际上,一个slot最核心的两个问题这里就点出来了,是显示不显示和怎样显示. 1.navigation ...

  7. 使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件

    写在前面 之前写过一篇关于vue实现dialog会话框组件的文章http://www.cnblogs.com/fozero/p/8546883.html, 讲到了如何实现一个vue对话框组件,其中涉及 ...

  8. slot插槽（学习笔记）

    slot插槽(有默认值,也有名称)一般情况下通过名称进行匹配什么是插槽,有什么用?插槽相当于插入的一个东西,可以用来灵活的封装组件,比如说封装一个模态框对组件进行内容的定制,slot插槽,一对组件标签 ...

  9. Vue（14）slot插槽的使用

    为什么使用slot slot(插槽) 在生活中很多地方都有插槽,电脑usb的插槽,插板当中的电源插槽 插槽的目的是为了让我们原来的设备具备更多的扩展性 比如电脑的USB我们可以插入U盘,手机,鼠标,键 ...

  10. Axios、Vue组件-生命周期、计算属性、Slot插槽、自定义事件、v-router、钩子函数

    Axios:网络通信 <script> var vm =new vue({ el:"#app", data(){ return{ info:{ //返回的数据必须和js ...

随机推荐

  1. [HDU4625] JZPTREE+[国家集训队] Crash 的文明世界 题解

    老师发福利,放了两道一毛一样的题. 考虑无视战术,直接化简: \[\sum_{v=1}^ndis(u,v)^k=\sum_{v=1}^n\sum_{i=0}^k\begin{Bmatrix}k\\i\ ...

  2. 从SQL Server迁移到Mysql Mysql导入SQL Server的数据库

    mysql怎么导入 SQl Server的数据库, SQL Server导出的SQL文件Mysql无法识别 需要用到的软件 Navicat mysql workbanch SQL Server man ...

  3. 使用JAVA8 filter对List多条件筛选

    记录项目开发的过程中遇到的一些问题及解决方法,由于公司操作数据库都是统一使用工具生成的存在一些多表查询模糊查询,这些操作只能在集合方面下手了,比如发送邮件记录方面查询,对用户的名字及邮件模糊检索 年龄 ...

  4. Linux - 服务器磁盘 Raid & 分区 & 挂载

    一.流计算服务器 有一台流处理服务器(系统盘:2*600G.数据盘:6*600G)分区挂载如下: 设备名 分区 大小 挂载点 文件系统类型 磁盘用途 分区类别 /dev/sda /dev/sda1 3 ...

  5. Hadoop - [01] 概述

    Hadoop官网:https://hadoop.apache.org/ Hadoop下载:https://archive.apache.org/dist/hadoop/common/ 一.Hadoop ...

  6. [译] DeepSeek开源smallpond开启DuckDB分布式之旅

    DeepSeek 正通过 smallpond(一种新的.简单的分布式计算方法)推动 DuckDB 超越其单节点的局限.然而,我们也需要探讨,解决了横向扩展的挑战后,会不会是带来新的权衡问题呢? 译者序 ...

  7. . net core 项目创建和发布

    1.发布和部署到IIS https://www.cnblogs.com/loverwangshan/p/11284169.html https://www.cnblogs.com/wangjiegua ...

  8. 当我老丈人都安装上DeepSeek的时候，我就知道AI元年真的来了！

    关注公众号回复1 获取一线.总监.高管<管理秘籍> 春节期间DeepSeek引爆了朋友圈,甚至连我老丈人都安装了APP,这与两年前OpenAI横空出世很不一样,DeepSeek似乎真的实现 ...

  9. kubelet.service: Failed with result 'exit-code'.

    检查​​kubelet​​服务状态 systemctl status kubelet 检查journal日志 ​​journalctl​​​ 的 ​​-u​​​ 参数可以指定服务进行过滤,这样可以屏蔽 ...

  10. llamacpp转换hf、vllm运行gguf

    Linux通过huggingface安装大模型 huggingface官网 https://huggingface.co/ wget https://repo.anaconda.com/minicon ...