第一种情况:内部有两个独立插槽(模板自动迭代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" }

作用域插槽模板迭代的次数,取决于组件内部独立slot的数量的更多相关文章

  1. Vue组件之作用域插槽

    写作用域插槽之前,先介绍一下Vue中的slot内容分发: 如果<child-component></child-component>标签之间没有插入那两个p标签的话,页面会显示 ...

  2. Vue基础-匿名插槽与作用域插槽的合并和覆盖行为

    Vue 测试版本:Vue.js v2.5.13 Vue 文档: <slot> 元素可以用一个特殊的特性 name 来进一步配置如何分发内容.多个插槽可以有不同的名字.具名插槽将匹配内容片段 ...

  3. Vue.js插槽slot和作用域插槽slot-scope学习小结

    一般来说,在Vue项目中使用父子组建时,都是把通用的HTML结构提取出来写成一个子组件,需要动态展示的数据用过prop属性传递,不过有时候我们可能想给子组件传递一个HTML代码,这个时候用prop不太 ...

  4. 新版vue作用域插槽的使用

    2.6开始,作用域插槽的使用有了不同的地方: 作用域插槽的个人理解就是让子组件的数据可以在父组件中使用:  也是一个数据传递的方式了: 不多说,上代码 子组件定义一个插槽,并且定义一个需要传递到父组件 ...

  5. Vue基础-作用域插槽-列表组件

    Vue 测试版本:Vue.js v2.5.13 Vue 官网介绍作用域插槽时, 在 2.5.0+,slot-scope 能被用在任意元素或组件中而不再局限于 <template>. 作用域 ...

  6. [Vue]组件——插槽:slot(匿名插槽,具名插槽)与slot-scope(作用域插槽)

    1.单个插槽 | 匿名插槽 1.1<navigation-link> 子组件定义为: <a v-bind:href="url" class="nav-l ...

  7. Vue 组件3 作用域插槽

    作用域插槽是一种特殊类型的插槽,用作使用一个(能够传递数据到)可重用模板替换已渲染元素. 在子组件中,只需将数据传递到插槽,就像你将props传递给组件一样: <div class=" ...

  8. 作用域插槽 向父组件传递 <template slot-scope="{ row, index }" slot="dateNo">

    作用域插槽 向父组件传递 <template slot-scope="{ row, index }"  slot="dateNo"> slotTes ...

  9. 使用slot分发内容 作用域插槽

    除非子组件模板包含至少一个<slot>插口,否则父组件的内容将会别丢弃.当子组件模板只有一个没有属性的slot时,父组件整个内容片断将插入到slot所在的DOM位置,并替换掉slot标签本 ...

随机推荐

  1. pyzbar 安装

    什么是ZBar? ZBar是一个开源库,用于扫描.读取二维码和条形码.支持的二维码包括:EAN/UPC,QR等. 1.windows 下直接pip 安装: pip install pyzbar 2.u ...

  2. git clone指定branch或tag

    git clone指定branch或tag发布时间:October 28, 2018 // 分类: // No Comments 取完整: git clone https://github.com/a ...

  3. 软件开发的podcast

    目录 中文 喜马拉雅 https://www.ximalaya.com/ SingularFM 8个开发者值得一听的英文 Podcast https://zhuanlan.zhihu.com/p/24 ...

  4. 关于Android Studio3.2新建项目无法运行出现Failed to find Build Tools revision 28.0.3的解决方法

    关于Android Studio3.2新建项目无法运行出现Failed to find Build Tools revision 28.0.3的解决方法 https://blog.csdn.net/h ...

  5. tensorflow 笔记 15:如何使用 Supervisor

    如何使用Supervisor在不使用Supervisor的时候,我们的代码经常是这么组织的 variables ... ops ... summary_op ... merge_all_summari ...

  6. 解决bootstrap-table表头filter-control select控件被遮挡显示不全的问题

    [本文出自天外归云的博客园] 在使用bootstrap-table的extension——filter-control时(对应表格的data-filter-control="true&quo ...

  7. Ubuntu16.04安装CDH

    官方参考文档: https://www.cloudera.com/documentation/enterprise/5-15-x/topics/configure_cm_repo.html 安装cdh ...

  8. ThinkPHP5远程代码执行高危漏洞(附:升级修复解决方法)

    漏洞描述 由于ThinkPHP5框架对控制器名没有进行足够的安全检测,导致在没有开启强制路由的情况下,黑客构造特定的请求,可直接GetWebShell. 漏洞评级 严重 影响版本 ThinkPHP 5 ...

  9. win10专业版激活步骤

    1.右键开始图标,选择[windows powershell(管理员)],或者命令提示符管理员: 2.打开命令窗口,复制这个命令slmgr /ipk W269N-WFGWX-YVC9B-4J6C9-T ...

  10. 封装redis操作 php版本

    <?php namespace App\Service; use App\Service\BaseService; use Illuminate\Support\Facades\Redis; / ...