vue slot插槽的使用方法
2024-08-22 00:10:33
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://unpkg.com/vue@2.3.3/dist/vue.js"></script>
</head> <body>
<div id="app">
<div>
<!-- 单slot -->
<v-one>
<!-- 这里的所有内容会替换掉slot -->
<p>初始化段落一</p>
<p>初始化段落二</p>
</v-one>
<!-- 渲染结果 -->
<!-- <div>
<h1>组件标题</h1>
<p>初始化段落一</p>
<p>初始化段落二</p>
<p>组件段落内容</p>
<p>I am one</p>
</div> --> <!-- 具名slot -->
<v-two>
<p slot="nav">我是导航</p>
<p slot="main">我是内容</p>
<p slot="footer">我是底部</p>
</v-two>
<!-- 渲染结果 -->
<!-- <div>
<nav>
<p>我是导航</p>
</nav>
<main>
<p>我是内容</p>
</main>
<footer>
<p>我是底部</p>
</footer>
</div> --> <!-- 作用域插槽 -->
<v-three>
<!-- 父组件默认无法使用子组件数据 -->
<template scope="props">
<p>{{props.text}}</p>
</template>
</v-three> <!-- 渲染结果 -->
<!-- <div><p>I am three</p></div> -->
</div>
</div> <template id="one">
<div>
<h1>组件标题</h1>
<slot></slot>
<p>组件段落内容</p>
<p>{{one}}</p>
</div>
</template> <!-- 具名slot -->
<template id="two">
<div>
<nav>
<slot name="nav"></slot>
</nav>
<main>
<slot name="main"></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
</template> <!-- 作用域插槽 -->
<template id="three">
<div>
<!-- 把数据传递给slot,这样父组件也可以访问three这个组件的数据 -->
<slot :text="three"></slot>
</div>
</template>
<script>
new Vue({
el: '#app',
components: {
'v-one': {
template: '#one',
data() {
return {
'one': 'I am one'
}
}
},
'v-two': {
template: '#two',
data() {
return {
'two': 'I am two'
}
}
},
'v-three': {
template: '#three',
data() {
return {
'three': 'I am three'
}
}
}
}
});
</script>
</body> </html>
单个slot使用最简单,也是最常用的,当我们定义了一个子组件,父组件在使用的这个组件的时候,想在内部自定义一些初始化数据,这时候就可以用slot实现。
具名slot只是给slot加了name属性,在使用的时候可以引入多个。
作用域slot就比较强大了,我们知道子组件的数据,在父组件中是无法使用的,但是通过官方提供的扩展,可以轻松实现这一点。
渲染后效果图,可以直接复制代码自己在浏览器运行查看效果
最新文章
- code of C/C++(2)
- Docker create image
- 【kd-tree】bzoj2850 巧克力王国
- Sales_item
- 线上问题:如何定位解决CPU高占有率
- 多目标遗传算法 ------ NSGA-II (部分源码解析) 临时种群生成新父代种群 fillnds.c
- git 远程追踪
- ASP.NET分页存储过程,解决搜索时丢失条件信息
- Noah的学习笔记之Python篇:命令行解析
- js函数知识点
- Unicode UTF-8 UTF-16的关系
- ajax请求导致status为canceled(无任何回调数据)的原因
- SQL 必知必会&#183;笔记<;7>;汇总数据——使用聚合函数
- 安卓开发_startActivityForResult的详细用法
- weblogic补丁安装失败(Patch B25A is mutually exclusive and cannot coexist with patch(es): UIAL)
- Code Signal_练习题_depositProfit
- js06
- 【原】Spring activiti 环境搭建之数据库创建
- Error LNK2019:Unresolved External Symbol 的解决方案
- LintCode-41.最大子数组