vue插槽的使用方法

1.什么是插槽？

插槽（slot）是vue为组件的封装提供的能力。把不确定的部分定义为插槽。

插槽共分为3中：

插槽的结构：

匿名插槽：<slot></slot>

具名插槽：<slot name=top></slot>

作用域插槽:<slot title='标题' :num=count></slot>

1. 匿名插槽

匿名插槽的作用：保留组件中的所有原始标签内容，这种插槽被称为匿名插槽

直接在组件中写上slot标签对，就可以在根元素中的引用的组件中间显示所写的内容。

当不写name的时候为匿名插槽（其实它会默认带上name=‘default’）

2. 具名插槽

凡是具有name属性的slot标签，就被称为具名插槽即<slot name=top>(在子组件中写，写的位置不同，在引用该模板的页面中显示的位置也会不一样)。

一个组件中有多个插槽的时候，如果没有设置 v-slot 属性值，会默认把元素插到没有设置 name 属性值的 slot 组件中，为了把对应的元素放到指定的位置，就需要借助 v-slot 和 name 属性，把内容对应起来。

<child-com>

<template #header>

头部

</template>

<template #body>

内容

</template>

<template #footer>

脚

</template>

</child-com>

3. 作用域插槽

在组件的原始内容中，通过slot-scope属性接受作用域插槽传递的值，即obj={title：‘标题’，num：19}

作用域插槽:将组件模板中的数据传递给组件的原始内容

1. 在slot开始标签中，添加要传递的数据，避开name属性（具名插槽）

2. 在原始内容中通过slot-scope属性（其值是自定义的）接受传递的数据，即slot-scope=varName(本质是个对象，存储传递的数据，即数据会自动转换成键值对，存储在这个对象里，所以属性名对应属性名，属性值对应属性值）

<child-com>

<template v-slot:header="slotProps">

插槽内容--{{ slotProps.item }} 序号--{{ slotProps.index }}

</template>

</child-com>

//子组件代码

<template>

<div v-for="(item, index) in arr" :key="index">

<slot :item="item" name="header" :index="index"></slot>

</div>

</template>

<script setup>

const arr = ['1111', '2222', '3333']

</script>

vue插槽的使用方法相关推荐

vue 插槽 slot 的用法
vue 插槽 slot 的用法一.简单定义.使用 slot 二.slot 变量传值三.跨组件传递 slot 方法1: 多定义一个中间插槽方法2:使用 scopedSlots 字段传递作用域插槽 ...
织梦引用html,html直接引用vue和element-ui的方法
短视频,站群系统,自媒体,达人种草一站服务这篇文章主要介绍了html直接引用vue和element-ui的方法,本文通过实例代码给大家介绍的非常详细,采集软件,对大家的学习或工作具有一定的参考借鉴价 ...
vscode 新建php模板,使用VSCode快速创建vue文件模版的方法介绍
VSCode怎么自定义代码模版?下面本篇文章给大家介绍一下VSCode快速创建vue文件模版的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 修改位置打开vscode首选项- ...
vue插槽样式_vue 插槽简介及使用示例
Vue的插槽,是一种内容分发机制,但是我感觉它更加像组件的一种占位符的概念,通过插槽,等待组件外部传入复杂的内容. 使用插槽的好处在以前的例子中todo-item插槽直接写在了todo-list插槽 ...
Vue 组件间通信方法汇总
Vue 组件间通信方法汇总 ⭐️ 更多前端技术和知识点,搜索订阅号 JS 菌订阅除了使用 Vuex 方法外,vue 提供了各种各样的组件间通信的方案.文章整理一下父子组件.兄弟组件.祖先后代组件间 ...
vue 中的el表达式_Vue中vue.filter()的使用方法介绍（过滤）
本篇文章给大家带来的内容是关于Vue中vue.filter()的使用方法介绍(过滤),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. Vue过滤器 {{msg |msgFormat}} ...
keep alive PHP,vue中keep-alive使用方法详解
这次给大家带来vue中keep-alive使用方法详解,vue中keep-alive使用的注意事项有哪些,下面就是实战案例,一起来看一下. 1.keep-alive的作用以及好处在做电商有关的项目中 ...
[vue] 怎么给vue定义全局的方法
[vue] 怎么给vue定义全局的方法第一种:挂载到Vue的prototype上.把全局方法写到一个文件里面,然后for循环挂载到Vue的prototype上,缺点是调用这个方法的时候没有提示Obj ...
【vue开发】vue插件的install方法
MyPlugin.install = function (Vue, options) {// 1. 添加全局方法或属性Vue.myGlobalMethod = function () {// 逻辑.. ...

vue插槽的使用方法

1.什么是插槽？

vue插槽的使用方法相关推荐

最新文章

热门文章