vue Slot理解

简介

插槽:简单理解就是组件内部留一个或多个的插槽位置,可供组件传对应的模板代码进去。插槽的出现,让组件变的更加灵活。

一、匿名插槽

//  组件(父)
  <my-component>
    <p>hello,world!</p>
  </my-component>

//  组件内部(子)
    <div class="child-page">
        <h1>子页面</h1>
        <slot></slot>  //  替换为 <p>hello,world!</p>
    </div>

//  渲染结果
    <div class="child-page">
        <h1>子页面</h1>
        <p>hello,world!</p>
    </div>

以上是最简单的匿名插槽eg

二、具名插槽

顾名思义就是带名字的插槽,假如需要在组件内部预留多个插槽位置,就需要为插槽定义名字,指定插入的位置。

//  组件(父)
  <my-component>
    <template v-slot:header>
      <p>头部</p>
    </template>
    <template v-slot:footer>
      <p>脚部</p>
    </template>
    <p>身体</p>
  </my-component>

//  组件内部(子)
    <div class="child-page">
        <h1>子页面</h1>
        <slot name="header"></slot>
        <slot></slot>  //  等价于 <slot name="default"></slot>
        <slot name="footer"></slot>
    </div>

//  渲染结果
    <div class="child-page">
        <h1>子页面</h1>
        <p>头部</p>
        <p>身体</p>
        <p>脚部</p>
    </div>

vue >=2.6.0版本,使用v-slot替代slot 和 slot-scope。

注意三点

  • 具名插槽的内容必须使用模板<template></template>包裹
  • 不指定名字的模板插入匿名插槽中,推荐使用具名插槽,方便代码追踪且直观清楚
  • 匿名插槽具有隐藏的名字"default"

三、具名插槽的缩写和动态插槽名

具名插槽缩写

  <my-component>
    <template #header>
      <p>头部</p>
    </template>
    <template #footer>
      <p>脚部</p>
    </template>
    <template #body>
      <p>身体</p>
    </template>
  </my-component>

动态插槽名

  <my-component>
    <template #[headerPart]>  //  v-slot:[headerPart]
      <p>头部</p>
    </template>
    <template #footer>
      <p>脚部</p>
    </template>
    <template #body>
      <p>身体</p>
    </template>
  </my-component>

  ...
  data() {
    return {
      headerPart: ‘header‘
    }
  }

四、插槽参数传递

父传子

//  组件(父)
  <my-component
    :title="‘我是‘"
  >
    <template #header>
      <p>头部</p>
    </template>
    <template #footer>
      <p>脚部</p>
    </template>
    <template #body>
      <p>身体</p>
    </template>
  </my-component>

//  组件内部(子)
    <div class="child-page">
        <h1>{{title}}子页面</h1>
        <slot name="header"></slot>
        <slot name="body"></slot>
        <slot name="footer"></slot>
    </div>
    props: {
        title: {
            type: String
        }
    }

以下这种传参是错误的

  <my-component
    :title="‘我是‘"
  >
    <template #header>
      <p>{{title}}头部</p>  //  错误
    </template>
    <template #footer>
      <p>脚部</p>
    </template>
    <template #body>
      <p>身体</p>
    </template>
  </my-component>

所以如果需要动态修改插槽的内容,就需要子组件传参给父组件。

子传父

//  组件(父)传参并接受参数
  <my-component
    v-bind="layout"  //  传递参数
  >
//  可以使用ES6解构{ slotProps }
    <template #header="slotProps">  //  接受参数
      <p>{{slotProps.headers}}</p>
    </template>
    <template #footer="slotProps">
      <p>{{slotProps.footers}}</p>
    </template>
    <template #body="slotProps">
      <p>{{slotProps.bodys}}</p>
    </template>
  </my-component>

  ...
  data() {
    return {
      layout: {
        header: ‘头部‘,
        body: ‘身体‘,
        footer: ‘脚部‘
      }
    }
  }

//  组件内部(子)
    <div class="child-page">
        <h1>子页面</h1>
        <slot name="header" :headers="header"></slot>
        <slot name="body" :bodys="body"></slot>
        <slot name="footer" :footers="footer"></slot>
    </div>

  ...
    props: {
        header: {
            require: true
        },
        body: {
            require: true
        },
        footer: {
            require: true
        }
    }

总结:
父组件传参给子组件,props接收后,插槽slot再通过绑定属性传递参数返回给父组件,不管是模板代码还是数据,控制权完全掌握在父组件手里。

作者:vinterx
链接:https://www.jianshu.com/p/b0234b773b68
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

原文地址:https://www.cnblogs.com/zengpeng/p/12095712.html

时间: 2024-11-09 06:08:01

vue Slot理解的相关文章

vue 插槽理解

插槽,顾名思义留一个坑在组件中,然后动态的去填坑,例如: //Child.vue 子组件 <template> <div> <slot></slot> </div> </template> <script> </script> <style lang=""> </style> //Parent.vue 引入子组件的文件 <template> <div

vue中的slot理解和使用

最近被vue 搞得一塌糊涂,理解的比较慢,工作进度进度要求太快,需求理解不明,造成了很大的压力. 在理解Vue中的Slot的时候看了网上的相关内容,看了半天没看到明白说的是什么,然后自己就安装了vue的相关环境,创建了一个项目,实际动手看看是什么东西, 现理解为: 用父组件的内容去替换掉子组件的内容: 根据父组件中的 <div slot="slot1">slottest</div> 如果引入的子组件中有 <slot name="slot1&quo

vue中的插槽slot理解

本篇文章参考赛冷思的个人博客 1.函数默认传参 在我们写js函数我们的可能会给他们一个默认的参数,写法是 function show(age,name){ var age = age || 20; var name = name || 张三; console.log(age,name); } show(); // 20,张三 show(18,"命名") // 18,明明 如果用户不传入参数,那么会输出默认值,如果用户传入,会输出传入的值,这种写法很灵活 vue中的组件,也可以有默认的模

vue自学入门-4(vue slot)

好长时间没有用vue了,从新安装vue脚手架. 1.从新安装webpack cnpm install --save-dev webpack 2.vue init webpack my-project-slot 3.进入目录 cnpm install 4.cnmp run dev 启动成功 5.router-view 部分会被替换成HelloWorld.vue内容 6.修改helloworld.vue内容如下 <template> <div class="hello"&

Vue nextTick 理解

官网解释: 将回调延迟到下次 DOM 更新循环之后执行.在修改数据之后立即使用它,然后等待 DOM 更新.它跟全局方法 Vue.nextTick 一样,不同的是回调的 this 自动绑定到调用它的实例上. 我的理解:在vue完全操作完DOM之后的回调函数. 也就是说如果不调用nextTick直接用JS操作DOM的话,会出现DOM不一样的状态(数量或者属性等)

vue之理解异步更新 --- nextTick

默认情况下,vue中DOM的更新是异步执行的,理解这一点非常重要. 当侦测到数据变化时,Vue会打开一个队列,然后把在同一个事件循环(event loop)当中观察到的数据变化的watcher推送进入这个队列,加入一个watcher在一个事件循环中被触发了多次,它只会被推送到队列中一次, 然后在进入下一次的事件循环时,Vue会清空队列并进行必要的DOM更新,.在内部,Vue 会使用 MutationObserver 来实现队列的异步处理,如果不支持则会回退到 setTimeout(fn, 0).

vue slot

一般我发现slot都是用在子组件 不知道对不对,不对的请留言指教 ,谢谢谢谢 使用slot场景一: 子组件Minput.vue <input type='text'/> 父组件 Minput <Minput>可以显示吗</Minput> 这种情况下  Minput标签内的文字是不会渲染出来的 如果现在想在里面把文字渲染出来怎么办 好 用slot 子组件 <input type='text'/> <slot></slot> 这样的话,父

大白话vue——slot的作用与使用

这篇内容本来是不打算放在首页上的,因为内容实在是比较简单,但是在查找slot的使用讲解时发现相关的讲解比较少,要么像官方文档一样简单讲解(看过任然一脸懵逼),也许是自己理解能力比较差...所以在此讲述记录吧 言归正传,且看正文讲解 在看官网对slot的解释中,出现次数最多的是"插槽",如果想象成物体,也就是说slot是一个可以插入的槽口,比如插座的插孔.那么slot的作用是什么呢? 先来看下面的例子 //slot组件<template> <div class=&quo

[Vue @Component] Pass Props Between Components with Vue Slot Scope

Components with slots can expose their data by passing it into the slot and exposing the data using slot-scope in the template. This approach allows you to pass props down from Parent components to Child components without coupling them together. For