vue中slot的用法案例
2024-09-07 14:06:39
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>slot</title>
<script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<cont :list="[{name:'xhA'}]">
<!-- slot-scope设置插槽 -->
<!-- 因为list上prop获取过来的 无法直接设置到插槽中 需要借助 slot-scope读取到 然后才可以设置到插槽中 -->
<!-- 也可以将prop过来的数据 设置到data中 然后通过data来读取 -->
<template slot="cc01" slot-scope="list">
<button>111 </button>
<!-- 设置插槽数据 -->
<div>{{list}}</div>
</template>
<template slot="cc02" slot-scope="list">
<!-- 直接通过直接父类data中来设置 -->
<button>222----{{dataList}}--333</button>
</template>
<template slot="cc03">
<button>333</button>
</template>
</cont>
</div>
<script>
Vue.component('cont',{
template:`<div>
<slot name="cc01" :list="list"></slot>
<slot name="cc02" :list="list"></slot>
<slot name="cc03" :list="list"></slot>
</div>`,
props:{
list:{
default:[],
type:Array
}
}
})
new Vue({
data:{
dataList:[{msg:'111'},{msg:'222'},{msg:'333'}]
}
}).$mount('#app')
</script>
</body>
</html>
最新文章
- 项目自动化建构工具gradle 入门5——在intellij中做一个gradle的web工程
- Linux服务管理
- 【ASP.NET】复制单个文件同时到多个目录
- DateUtil
- 基于天天动听API开发在线音乐查询网站
- ASP.NET定制简单的错误处理页面
- oc-数据模型的建立
- Android中的时间日期选择器
- Android SlidingMenu 滑出侧边栏
- SSM整合中遇到的不能扫描注解的bug
- 在View中使用CGridCtrl时出现系统异常
- Akka（30）： Http：High-Level-Api，Routing DSL
- Mac安装Elasticsearch时提示：No Java runtime present, requesting install.
- SQL基础学习_05_函数、谓词、CASE表达式
- Spring Cache 笔记
- 《ServerSuperIO Designer IDE使用教程》- 6.增加与阿里云物联网（IOT）对接服务，实现数据交互。发布：v4.2.4 版本
- canvas连线特效
- Java判断一个字符是否是数字的几种方法的代码
- linux提取第一列且删除第一行（awk函数）
- oracle数据库SQL入门