作用域插槽模板迭代的次数,取决于组件内部独立slot的数量
2024-09-07 05:40:21
第一种情况:内部有两个独立插槽(模板自动迭代2次)
<!DOCTYPE html>
<html> <head>
<title> hello world vue </title>
<meta charset="utf-8" />
</head> <body>
<div id="app" v-cloak>
<child-component>
<template scope="props">
<p>来自父组件的内</p>
<p> {{props.msg1}}</p>
<p> {{props.msg2}}</p>
<p> {{props}}</p>
<hr>
</template>
</child-component>
</div>
</body> </html> <script src="jquery-3.1.1.js"></script>
<script src="vue.js"></script> <script>
$(document).ready(function() { });
</script> <script>
var bus = new Vue(); Vue.component('child-component', {
template: '\
<div class="container">\
<slot msg1="来自子组件的内容1"></slot>\
<slot msg2="来自子组件的内容2"></slot>\
<div>',
props: [],
data: function() {
return {}
},
methods: {}
}); var app = new Vue({
el: '#app',
data: {
showChild: true
},
computed: {},
methods: {},
components: {},
mounted: function() {}
});
</script>
来自父组件的内 来自子组件的内容1 { "msg1": "来自子组件的内容1" } ---------------------------------------
来自父组件的内 来自子组件的内容2 { "msg2": "来自子组件的内容2" }
第二种情况:内部有1个独立插槽(虽然有两个变量,模板仅仅迭代一次)
<!DOCTYPE html>
<html> <head>
<title> hello world vue </title>
<meta charset="utf-8" />
</head> <body>
<div id="app" v-cloak>
<child-component>
<template scope="props">
<p>来自父组件的内</p>
<p> {{props.msg1}}</p>
<p> {{props.msg2}}</p>
<p> {{props}}</p>
<hr>
</template>
</child-component>
</div>
</body> </html> <script src="jquery-3.1.1.js"></script>
<script src="vue.js"></script> <script>
$(document).ready(function() { });
</script> <script>
var bus = new Vue(); Vue.component('child-component', {
template: '\
<div class="container">\
<slot msg1="来自子组件的内容1" msg2="来自子组件的内容2"></slot>\
<div>',
props: [],
data: function() {
return {}
},
methods: {}
}); var app = new Vue({
el: '#app',
data: {
showChild: true
},
computed: {},
methods: {},
components: {},
mounted: function() {}
});
</script>
来自父组件的内 来自子组件的内容1 来自子组件的内容2 { "msg1": "来自子组件的内容1", "msg2": "来自子组件的内容2" }
最新文章
- Winform开发框架之读卡器和条码扫描枪的数据接收处理
- Android应用主题与横竖屏的切换
- Jenkins入门系列之——00答疑解惑
- FMDB数据库中的一些操作
- php5.3 连接 sqlserver2005
- 一句JS搞定只允许输入数字和字母
- JavaScript类的设计
- 让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法--(转)
- Office2003/2010等集成SP的简单方法
- Cmder--cmd的替代工具
- Java面试题之Redis
- diff比较两个文件 linux
- Map集合、HashMap集合、LinkedHashMap集合、Hashtable集合、Collections工具类和模拟斗地主洗牌和发牌
- OpenCV LK光流法测试
- orcle 如何快速插入百万千万条数据
- PySpider问题记录http599
- 小峰servlet/jsp(3)登陆功能实现
- JAVA中处理事务的程序--多条更新SQL语句的执行(包括回滚)
- MemSQL学习笔记-类似MySQL的数据库
- socket--接受大数据
热门文章
- opencv 图像resize
- Xamarin图表开发基础教程(13)OxyPlot框架支持的其它图表
- git push ! [rejected] master ->; master (non-fast-forward) error: failed to push some refs to &#39;https://github.com/Operater9/guest&#39; hint: Updates were rejected because the tip of your current bra
- 运维笔记--给正在运行的Docker容器动态绑定卷组(挂载指定目录)
- 浅入深出ETCD之【集群部署与golang客户端使用】
- 使用gevent包实现concurrent.futures.executor 相同的公有方法。组成鸭子类
- postman传数组参数
- LeetCode_482. License Key Formatting
- ZYNQ 7020学习笔记之PL侧普通信号中断PS的实验
- Difference between java.lang.RuntimeException and java.lang.Exception