Vue 组件3 作用域插槽
2024-08-29 05:18:48
作用域插槽是一种特殊类型的插槽,用作使用一个(能够传递数据到)可重用模板替换已渲染元素。
在子组件中,只需将数据传递到插槽,就像你将props传递给组件一样:
<div class="child">
<slot text="hello from child"></slot>
</div>
在父级中,具有特殊属性scope的<template>元素必须存在,表示它是作用域插槽的模板。scope的值对应一个临时变量名,此变量接收从子组件中传递的props对象。
<div class="parent">
<child>
<template scope="props">
<span>hello from parent</span>
<span>{{ props.text }}</span>
</template>
</child>
</div>
如果我们渲染以上结果,得到的输出会是:
<div class="parent">
<div class="child">
<span>hello from parent</span>
<span>hello from child</span>
</div>
</div>
作用域插槽更具代表性的用例是列表组件,允许组件自定义应该如何渲染列表每一项:
<my-awesome-list :items="items">
<!-- 作用域插槽也可以是具名的 -->
<template slot="item" scope="props">
<li class="my-fancy-item">{{ props.text }}</li>
</template>
</my-awesome-list>
列表组件的模板:
<ul>
<slot name="item"
v-for="item in items"
:text="item.text">
<!-- 这里写入备用内容 -->
</slot>
</ul>
最新文章
- 跟我从零基础学习Unity3D开发--资源打包篇(AssetBundle)
- O(n)求1-n的逆元
- 33条C#和.NET经典面试题目及答案
- pyqt4:在线程Qthread中使用定时器Qtimer
- 开源:ASP.NET MVC+EF6+Bootstrap开发框架
- Javascript之换肤(未完待续)
- 让asp.net web api同时支持[AcceptVerbs(";GET";,";POST";)]
- 让ASP.NET MVC页面返回不同类型的内容
- 在Java中使用MD5和BASE64
- Codeforces325-B(二分搜索)
- Python学习懒出极致——自备常用链接
- 关于Struts2自动装配和访问Servlet API
- spring boot利用controller来测试写的类
- Windows Server 2016-Win Ser 2016新增功能
- 牛客网测试题--小a和黄金街道
- MyEclipse运行Java出错:could not find the main class:test.program will exit(导入项目)
- Unity 处理预设中的中文
- VB识别分隔符
- [转]截图软件分享 - Snipaste
- 第一次Java实验