vue3 插槽详解

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

一、插槽的应用场景

       在某些场景中,封装组件,我们可能想要为子组件传递一些模板片段,让子组件在它们的组件中渲染这些片段。由此出现了插槽

二、插槽的内容与出口

1、出口

封装的组件代码如下图所示:

<template>
  <el-button type="primary">
    <slot></slot>  //出口
  </el-button>
</template>

2、 内容

页面对封装组件的应用

<template>
  <my-button>
   <!--内容-->
     按钮
  </my-button>
</template>

<script setup>
import myButton from "./components/myButton.vue";
</script>

注意:为插槽默认指定内容,代码如下图所示

封装组件的代码:

<template>
  <el-button type="primary">
    <slot>
      <!-- 默认内容 -->
      提交
    </slot>
  </el-button>
</template>

应用组件代码:

<template>
  <!-- 默认内容 -->
  <my-button></my-button>
</template>

<script setup>
import myButton from "./components/myButton.vue";
</script>

运行结果如下图所示:

 vue3作用域插槽,vue3 详解与应用,vue,前端,elementui

图一  插槽赋值

 vue3作用域插槽,vue3 详解与应用,vue,前端,elementui

图二  插槽默认值 

三、插槽的分类

1、一般插槽

只有插槽的出口以及内容(赋值内容或者默认内容),无其他信息,用法如上

2、具名插槽

通俗的说,就是有名字的插槽。有时在一个组件中包含多个插槽出口是很有用的,<slot> 元素可以有一个特殊的 attribute name,用来给各个插槽分配唯一的 ID,以确定每一处要渲染的内容,这类带 name 的插槽被称为具名插槽 (named slots)。没有提供 name 的 <slot> 出口会隐式地命名为“default”。

 要为具名插槽传入内容,我们需要使用一个含 v-slot 指令的 <template> 元素,并将目标插槽的名字传给该指令,具体内容如下:

封装组件:

<template>
  <div class="container">
    <div class="title">
      <div>
        <!--这里的name 是具名插槽的名称-->
        <slot name="title"></slot>
      </div>
      <div class="right">
        <!--这里的name 是具名插槽的名称-->
        <slot name="option"></slot>
      </div>
    </div>
    <div class="content">
      <!--这里的插槽没有name,则默认为default-->
      <slot></slot>
    </div>
  </div>
</template>

<style scoped>
.container {
  border-radius: 4px;
  border: 1px solid #ebeef5;
  background-color: #fff;
  color: #303133;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
}
.title {
  display: flex;
  justify-content: space-between;
  font-size: 20px;
  font-weight: 500;
  padding: 18px 20px;
  border-bottom: 1px solid #ebeef5;
  box-sizing: border-box;
}
.content {
  padding: 20px;
}
</style>

应用组件:

<template>
 
  <my-card class="box-card">
    <!-- title 插槽的内容放这里 -->
    <template v-slot:title>标题</template>

    <!-- option 插槽的内容放这里 -->
    <template v-slot:option>
      <el-button type="primary" link>操作</el-button>
    </template>

    <!-- 默认插槽的内容放这里 -->
    卡片内容是哈哈哈哈
  </my-card>
</template>

<script setup>
import myCard from "./components/myCard.vue";
</script>
<style scoped>
.box-card {
  width: 480px;
}
</style>

运行效果

vue3作用域插槽,vue3 详解与应用,vue,前端,elementui

图三  具名插槽的应用

3、作用域插槽

       上边的两种插槽有一个共同点:插槽内容可以访问到父组件的数据作用域,因为插槽内容本身是在父组件模板中定义的;无法访问子组件的数据,Vue 模板中的表达式只能访问其定义时所处的作用域,这和 JavaScript 的词法作用域规则是一致的,即:

父组件模板中的表达式只能访问父组件的作用域;子组件模板中的表达式只能访问子组件的作用域。

由此,产生了作用域插槽。

(1)封装组件代码如下:

<template>
  <div class="list-container">
    <div class="list-item" v-for="(item, i) in data" :key="i">
      <div class="first">
        <div>姓名:{{ item.name }}</div>
        <!-- 默认插槽的 name 为defalut,message 是作用域插槽传递的参数 -->
        <slot :message="item.name"></slot>
      </div>
    </div>
  </div>
</template>

<script setup>
import {} from "vue";
defineProps(["data"]);
</script>
<style scoped>
.list-container {
}
.list-item {
  border: 1px solid #ccc;
  margin-bottom: 10px;
  padding: 10px;
}
.first {
  display: flex;
  justify-content: space-between;
}
</style>

(2)应用组件代码如下:

<template>

  <my-list :data="tableArr">
    <!-- default 是插槽的名称,message 是组件传的参数 -->
    <template #default="{ message }">
      <el-button type="primary" @click="handleClick(message)">详情</el-button>
    </template>
  </my-list>
</template>

<script setup>
import { ref } from "vue";
import myList from "./components/myList.vue";

const tableArr = ref([
  {
    date: "2016-05-02",
    name: "张峰",
    province: "江苏省",
    city: "南京市",
    address: "南京市江宁区将军大道",
    zip: 200333,
  },
  {
    date: "2016-05-04",
    name: "吴丹",
    province: "上海",
    city: "普陀区",
    address: "上海市普陀区金沙江路 1517 弄",
    zip: 200333,
  },
  {
    date: "2016-05-01",
    name: "林天",
    province: "江苏省",
    city: "南京市",
    address: "南京市雨花台区软件大道",
    zip: 200333,
  },
]);

const handleClick = (obj) => {
  console.log("点击:", obj);
};
</script>

(3)运行效果如下:

vue3作用域插槽,vue3 详解与应用,vue,前端,elementui

图四 作用域插槽默认展示

vue3作用域插槽,vue3 详解与应用,vue,前端,elementui

图五 作用域插槽传递姓名参数 文章来源地址https://www.toymoban.com/news/detail-763118.html

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

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

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

相关文章

  • vue+element作用域插槽

    作用域插槽的样式由父组件决定,内容却由子组件控制。 在el-table使用作用域插槽 在el-tree使用作用域插槽      

    2024年04月23日
    浏览(25)
  • vue3中defineComponent 的作用详解

    vue3中,新增了 defineComponent ,它并没有实现任何的逻辑,只是把接收的 Object 直接返回,它的存在是完全让传入的整个对象获得对应的类型,它的存在就是完全为了服务 TypeScript 而存在的。 我都知道普通的组件就是一个普通的对象,既然是一个普通的对象,那自然就不会获得

    2024年02月05日
    浏览(20)
  • vue3插槽的使用

    插槽就是子组件中的提供给父组件使用的一个占位符,用 表示,父组件可以在这个占位符中填充任何模板代码,如 HTML、组件等,填充的内容会替换子组件的标签。 子组件SlotComponent.vue 父组件 输出结果: 输出结果: 子组件SlotComponent.vue 上段代码中我们添加了 3 个 slot 插槽,

    2023年04月20日
    浏览(34)
  • 【day 12】插槽和vue3

    用于父组件给子组件内 传递html内容 默认插槽 具名插槽 作用域插槽 适用于: 数据不在父组件内 在 子组件内 如果父组件想个性化定制子组件的内容 确保 你的 vue-cli 是 4.5.0的版本以上 vue --verstion的方式查看 版本过低请更新版本 初始文件对比 router/index.js的区别 store/index.js 关

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

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

    2024年02月15日
    浏览(39)
  • 【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)
  • Vue2向Vue3过度核心技术插槽

    1.作用 让组件内部的一些 结构 支持 自定义 2.需求 将需要多次显示的对话框,封装成一个组件 3.问题 组件的内容部分, 不希望写死 ,希望能使用的时候 自定义 。怎么办 4.插槽的基本语法 组件内需要定制的结构部分,改用****占位 使用组件时, ****标签内部, 传入结构替换slo

    2024年02月11日
    浏览(39)
  • 07. vue3+vite+qiankun搭建微应用前端框架,并接入vue3微应用

    因为业务系统接入的需要,决定将一个vue3+vite+ts的主应用系统,改造成基于qiankun的微应用架构。此文记录了改造的过程及vue3微应用接入的种种问题。 网上有很多关于微应用改造的案例,但很多都没写部署之后什么情况。写了部署的,没有实操部署在二级目录、三级目录是什

    2024年01月16日
    浏览(62)
  • vue3 slot 插槽 在h函数中如何使用

    vue3已经出了有一段时间了,越来越多的小伙伴开始用vue3来写项目。开发过程中难免会用到h函数, 有时候会使用h函数封装一些组件,封装组件又会用到插槽。所以呢对于在h函数中如何使用插槽稍作了整理,希望能帮到帮接触h函数的小伙伴。 这里只讲解插槽的用法,不涉及

    2024年02月09日
    浏览(32)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包