vue v-slot指令

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

定义

在Vue中, v-slot 指令用于定义插槽的模板内容。它用于在父组件中传递内容到子组件中的插槽。 v-slot 指令可以用于 标签或组件标签上,以便在子组件中使用插槽。

语法

使用 v-slot 指令时,可以使用以下两种语法:

  1. 缩写语法: # 符号表示 v-slot 指令,后面跟插槽名称。
<template #插槽名称>
  <!-- 插槽内容 -->
</template>
  1. 完整语法: v-slot 指令后面跟着 : ,后面是插槽名称。
<template v-slot:插槽名称>
  <!-- 插槽内容 -->
</template>

使用场景

v-slot 指令的使用场景包括但不限于以下几种:

  • 在组件中使用插槽,将父组件中的内容传递给子组件。
  • 在子组件中使用具名插槽,根据插槽名称渲染不同的内容。
  • 在子组件中使用作用域插槽,将子组件中的数据传递到父组件中进行渲染。

场景一

在组件中使用插槽,将父组件中的内容传递给子组件。

父组件

<template>
  <div>
    <child-component>
      <template v-slot:default>
        <!-- 插槽内容 -->
        <p>This is the content passed from the parent component.</p>
      </template>
    </child-component>
  </div>
</template>

子组件

<template>
  <div>
    <slot></slot>
  </div>
</template>

场景二

在子组件中使用具名插槽,根据插槽名称渲染不同的内容:

父组件

<template>
  <div>
    <child-component>
      <template v-slot:header>
        <!-- 插槽内容 -->
        <h1>Header Content</h1>
      </template>
      <template v-slot:body>
        <!-- 插槽内容 -->
        <p>Body Content</p>
      </template>
    </child-component>
  </div>
</template>

子组件

<template>
  <div>
    <slot name="header"></slot>
    <slot name="body"></slot>
  </div>
</template>

场景三

在子组件中使用作用域插槽,将子组件中的数据传递到父组件中进行渲染:

父组件

<template>
  <div>
    <child-component>
      <template v-slot:default="slotProps">
        <!-- 插槽内容 -->
        <p>{{ slotProps.message }}</p>
      </template>
    </child-component>
  </div>
</template>

子组件

<template>
  <div>
    <slot :message="message"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello from child component!"
    };
  }
};
</script>

在router-view中的应用,拿到router-view中的Component值,同时利用component 标签动态渲染组件

 <router-view v-slot="{ Component, route }">
      <transition appear name="fade-transform" mode="out-in">
        <keep-alive :include="keepAliveName">
          <component :is="Component" v-if="isRouterShow" :key="route.fullPath" />
        </keep-alive>
      </transition>
    </router-view>

tips

如果父组件没有向插槽传入值,则子组件会显示原来的内容,当传入具体的值时,则会覆盖掉插槽内的内容

子组件:

<template>
  <slot name="a1" :content="slot_data"> <h1>child-123</h1> </slot>
</template>

<script lang="ts" setup>
const slot_data = "child-content";
</script>

<style scoped></style>

父组件:

<template>
  <div>
    <h5>slot-test</h5>
    <child>
      <!-- <template #a1="{ content }">
        <div>{{ content }}</div>
      </template> -->
    </child>
  </div>
</template>

<script lang="ts" setup>
import child from "./child.vue";
</script>

<style scoped></style>

此时注释掉插值代码,结果如图,只会显示原来槽内内容
vue v-slot指令,vue,vue.js,前端,javascript

父组件代码修改如下

<template>
  <div>
    <h5>slot-test</h5>
    <child>
      <template #a1="{ content }">
        <div>{{ content }} 我是父组件</div>
      </template>
    </child>
  </div>
</template>

<script lang="ts" setup>
import child from "./child.vue";
</script>

<style scoped></style>

显示内容如图所示,则会覆盖掉原来槽值
vue v-slot指令,vue,vue.js,前端,javascript

在v-slot中,既可以由子组件向父组件传值(slot_data),又可以由父组件向子组件传递html内容,可以看做是‘’双向的‘’
在一些场景比如子组件渲染的内容既需要子组件数据又需要父组件数据时可以考虑使用插槽来完成

props同样也可以向子组件传值,在子组件中同一渲染完成,这是之前一直使用的方式,之后可以考虑使用插槽,拿到子组件中的值,又可以向子组件传递内容

只有一个默认插槽时

可以直接这样写,类似于上述router-view的用法
子组件:

<template>
  <slot :content="slot_data" :content2="slot_data2"> </slot>
</template>

<script lang="ts" setup>
const slot_data = "child-content";
const slot_data2 = "child-content2";
</script>

父组件:
content,content2采用解构赋值直接从slotProps值(默认传递变量的名称)中得到,templete也可以省略,child标签内的所有值都会被传入插槽

<template>
  <div>
    <h5>slot-test</h5>
    <child v-slot="{ content, content2 }">
      <!-- <h1>{{ content }}</h1> -->
      {{ content }}
      {{ content2 }}
      784561
    </child>
  </div>
</template>

<script lang="ts" setup>
import child from "./child.vue";
</script>

结果如图:
vue v-slot指令,vue,vue.js,前端,javascript文章来源地址https://www.toymoban.com/news/detail-628710.html

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

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

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

相关文章

  • jQuery.js - 前端必备的Javascript库

    作者: WangMin 格言: 努力做好自己喜欢的每一件事 jQuery.js 是什么? jQuery是一个快速简洁、免费开源易用的JavaScript框架, 倡导写更少的代码,做更多的事情 。它封装JavaScript常用的功能代码,提供了一种简便的JavaScript设计模式,以及我们开发中常用到的操作DOM的API,优化HTML文

    2024年02月05日
    浏览(70)
  • web前端框架JS学习之JavaScript类型转换

    vascript有多种数据类型,如字符串、数字、布尔等,可以通过typeof语句来查看变量的数据类型。数据类型转换就是数据类型之间相互转换,比如把数字转成字符串、把布尔值转成字符串、把字符串转成数字等,这在工作也是经常碰到的。 本期我们就给大家说说web前端框架JS学

    2024年02月10日
    浏览(59)
  • 前端学习--vue2--2--vue指令基础

    写在前面: 前置内容 - vue配置 vue指令只的是带有v-前缀的特殊标签属性 插值表达式{{}}是一种vue模板语法。 利用表达式进行差值,渲染到页面。 表达式可以是被求值的代码,js会计算 不能用差值表达式的 不存在的数据 {{data里面不存在的字段 js {{if}} 标签属性 span id=“

    2024年02月14日
    浏览(38)
  • element-UI的slot-scope指令

    在前端项目中,常常见到以下这种写法: 其中,表格的数据为: 在这种表单form嵌套在表格table的写法中,el-form-item的prop属性必须写成这样的: :prop=“‘list.’ + scope.$index + ‘.name’” 这是 elementui 规定的格式,渲染后的结果为 list.1.name。(索引值取决于当前用的是第几行记

    2024年02月15日
    浏览(44)
  • Vue.js 2.0 自定义指令

    除了默认设置的核心指令( v-model 和 v-show ),Vue 也允许注册自定义指令。注意,在 Vue2.0 里面,代码复用的主要形式和抽象是组件——然而,有的情况下,你仍然需要对纯 DOM 元素进行底层操作,这时候就会用到自定义指令。下面这个例子将聚焦一个 input 元素,像这样: 当页面

    2023年04月19日
    浏览(50)
  • 【前端灵魂脚本语言JavaScript⑤】——JS中数组的使用

    🐚 作者: 阿伟 💂 个人主页: Flyme awei 🐋 希望大家多多支持😘一起进步呀! 💬 文章对你有帮助👉关注✨点赞👍收藏📂 第一种: var 数组名 = new Array(); 创建一个空数组 第二种: var arr2 = new Array(10); 创建一个定长为10的数组 第三种 var arr3 = new Array(a,b,c); 创建时直接指定元素值

    2023年04月08日
    浏览(59)
  • 前端Vue入门-day01-初识vue与vue指令

    -(创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹) 目录 Vue 快速上手 Vue 概念 创建实例   插值表达式 响应式特性 开发者工具  Vue 指令  v-show  v-if  v-else  v-else-if  v-on v-bind  v-for key  v-model  概念:Vue 是一个用于 构建用户

    2024年02月09日
    浏览(44)
  • 前端框架学习 Vue (1) 概念,常用指令

            Vue是一个用于 构建用户界面 的 渐进式 框架         1.构建用户界面 :基于数据动态渲染页面                       2.渐进式: 循序渐进的学习(学一点就能用一点)                  (1)Vue核心包开发                         场景:局部模块改造          

    2024年01月22日
    浏览(41)
  • 前端学习---vue2--指令修饰符详解

    写在前面: 前端感觉系统学起来还行,我也不晓得我是咋快速入门1个月就开始看实习公司代码的。然后现在开始系统复习,然后感觉有的封装的还可以,不过就是我不晓得,像这个指令修饰符,其实说逻辑难写,倒是也没有,就是简单不用自己写. 就像后端判断字符串是否为

    2024年02月14日
    浏览(32)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包