专栏首页Nian糕的私人厨房Vue3.0 组件的核心概念_插槽

Vue3.0 组件的核心概念_插槽

Unsplash

Vue 在 2.6 版本中,对插槽使用 v-slot 新语法,取代了旧语法的 slotslot-scope,并且之后的 Vue 3.0 也会使用新语法,这并不是仅写法的不同,还包括了性能的提升

插槽分为普通插槽和作用域插槽,普通插槽为父组件传递数据/元素/组件给子组件,而子组件定义 <slot> 接收,当插槽有多个的时候,需要使用具名插槽 <slot name="xxx">,用于将数据绑定在指定的插槽

//  父组件
<p slot="item">old Nian糕</p>

// 子组件
<slot name="item" />
// 父组件
<template v-slot:item>
  <p>new Nian糕</p>
</template>

// 子组件
<slot name="item" />

作用域插槽为子组件 <slot> 绑定属性,传递数据给父组件,父组件通过 v-slot:xxx="props" 接收子组件传递的属性

//  父组件
<p slot="love" slot-scope="props">爱{{ props.name }}真是太好了</p>

// 子组件
<slot name="love" v-bind="{ name }" />

export default {
  data() {
    return {
      name: "Nian糕"
    }
  }
}
//  父组件
<template v-slot:love="props">
  <p>爱{{ props.name }}真是太好了</p>
</template>

// 子组件
<slot name="love" v-bind="{ name }" />

export default {
  data() {
    return {
      name: "Nian糕"
    }
  }
}

运行结果

End of File

行文过程中出现错误或不妥之处在所难免,希望大家能够给予指正,以免误导更多人,最后,如果你觉得我的文章写的还不错,希望能够点一下喜欢关注,为了我能早日成为简书优秀作者献上一发助攻吧,谢谢!^ ^

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 腾讯课堂 IMWeb 七天前端求职提升营 Day 2

    本次的系列博文主要是针对 腾讯课堂七天前端求职提升营 课程中,所推送的面试题目及编程练习的一次汇总,期间还包括三次直播课的分享,均由腾讯导师给大家讲解,该系列博...

    Nian糕
  • JavaScript 去除字符串首尾空格

    Nian糕
  • CSS 鼠标悬停图片,显示隐藏文本

    我在 JavaScript 鼠标悬停图片,显示隐藏文本 这篇博文当中实现了同样的效果,只不过是通过 JS 来实现的,但其实,通过 CSS 动画也能实现同样的效果...

    Nian糕
  • Vue入门基础之组件插槽(slot)使用

    组件的内容一般是在子组件中直接声明的,那么我们能不能再父组件进行自己去定义内容进行渲染呢?当然是可以的,slot就提供了极大的便利!下面看一下slot用法!

    十月梦想
  • THANKS GIVING

    童琪琳 ?   生活总是给予我们太多的东西,有些点滴、有些记忆,总是在不经意间被遗失。 从现在开始,试着去改变,让自己停下来,用心去感受那些点...

    用户1279178
  • 拼图类APP原型模板分享——简拼

    此原型模板所用到的组件有标签组、水平分隔线、圆形工具。交互动作有结合标签组实现页面跳转,选择组件触发按钮状态变化等。

    奔跑的小鹿
  • 入门微信小程序 (二)语法篇

    路由在项目开发中一直是个核心点,小程序路由方面经过很好的封装,提供了几个基本的跳转方法(这三个基本够用)

    sunseekers
  • WordPress 添加投稿功能

    WordPress网站开放投稿功能,接受读者的投稿。但WordPress本身并不提供投稿功能,只拥有强大的扩展能力,我们可以自己添加这个投稿功能。

    阳光岛主
  • 004.Zabbix3.x-Server服务端安装

    部署Zabbix需要LAMP或LANP环境,数据库可以为MySQL或者MariaDB。硬件及存储条件按需配置。

    木二
  • 推荐一款工具的借鉴思路

    对于批量操作我们一般是怎么使用呢,如果服务器数量不大的情况下,可以使用pssh或者是ansible来做。

    jeanron100

扫码关注云+社区

领取腾讯云代金券