Vue 中插槽的使用(通俗易懂)
<Child><span style=”color:red;”>hello world</span></Child>
<template>
<div>
<slot></slot>
<slot style=”color:blue;” >这是在slot上添加了样式</slot>
<slot name=”mySlot”>这是拥有命名的slot的默认内容</slot>
</div>
</template>
会输出:两个红色的hello world,以及一个使用slot的默认内容
注意:在slot标签添加样式无效。拥有命名的插槽不能被不含slot属性的标签内容替换,会显示slot的默认值(具名slot具有对应性);
2、 (具名插槽) 组件中有多个命名的slot 插槽时,可以实现父组件对子组件的指定位置显示内容或传参,如下:
<Child>
<span slot="header">hello world</span>
<span slot="main">hello world</span>
<span slot="footer">hello world</span>
<span slot="other">{{otherData}}</span>
</Child>
<template>
<div>
<slot name=”header”>这是拥有命名的slot的默认内容</slot>
<slot name=”main”>这是拥有命名的slot的默认内容</slot>
<slot name=”footer”>这是拥有命名的slot的默认内容</slot>
<slot name=”other”>这是拥有命名的slot的默认内容</slot>
</div>
</template>
作用域插槽代表性的用例是列表组件,允许在parent父组件上对列表项进行自定义显示,如下该items的所有列表项都可以通过slot定义后传递给父组件使用,也就是说数据是相同的,不同的场景页面可以有不同的展示方式:
<ul>
<slot name="item" v-for="item in items" :text="item.text" :myname="item.myname" >
slot的默认内容
</slot>
</ul>
<Child>
<template slot="item" slot-scope="props">
<li>{{props.myname}}</li>
</template>
</Child>
上一篇: vue 中的插槽
推荐阅读
-
特征工程和选择:优化模型性能的关键步骤 ---- 示例:泰坦尼克号生存预测中的特征工程,使用递归特征消除 (RFE) 进行特征选择
-
使用 xpath 在 HTML 中精确定位元素的基本方法
-
如何使用 ssm 实现基于 HTML 的中国传统面食介绍网站 + vue 的构建
-
在 Vue 中使用带有 v-if 的 ECharts 时遇到的问题和解决方案
-
Java 中的 HTTP 请求:使用 Apache HttpClient
-
学习 Webpack 中的图像 - JS-Vue-plugin
-
为什么 Vue 不使用 React 的切分更新?
-
设计模式__unity__unity 中的抽象工厂模式,使用单例模式加载资源
-
Vue 学习笔记 9:使用 HTML COM 进一步优化 Vue 学习笔记 7 的代码
-
Vue3 中的 30 个高频重点面试问题