第一种情况：内部有两个独立插槽（模板自动迭代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. Linux系统实现虚拟内存有两种方法：交换分区（swap分区）和交换文件

    Linux系统实现虚拟内存有两种方法:交换分区(swap分区)和交换文件 交换文件 查看内存:free -m , -m是显示单位为MB,-g单位GB 创建一个文件:touch /root/swapfi ...

  2. Default Activity Not Found解决方法

    2018年04月07日 17:22:44 Luckily_Liu 阅读数 13573更多 分类专栏: android   版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上 ...

  3. UICachedDeviceRGBColor CGImage]: unrecognized selector sent to instance 0xxxxxxxxxxx'

    UICachedDeviceRGBColor CGImage]: unrecognized selector sent to instance 0xxxxxxxxxxx' 报错原因是 本来应该写空间的 ...

  4. scrapy爬虫案例：用MongoDB保存数据

    用Pymongo保存数据 爬取豆瓣电影top250movie.douban.com/top250的电影数据,并保存在MongoDB中. items.py class DoubanspiderItem( ...

  5. os.environ详解

    我们想要用Python获得一些有关系统的各种信息的时候就不得不想到os的environ,那这里面都具体包含了那些内容呢? 简介 对于官方的解释,environ是一个字符串所对应环境的映像对象.这是什么 ...

  6. PAT 甲级 树专题小结

    1.已知两个序链表建树 先序中序建树 PAT 1086 node *buildTree(vector<int>pre,vector<int>in,int pl,int pr,i ...

  7. CentOS / RHEL 内核升级

    1. 查看当前内核版本 [root@192.168.118.11 ~]#cat /etc/redhat-release CentOS Linux release 7.7.1908 (Core) [ro ...

  8. git本地以及远程分支回滚

    转:https://www.cnblogs.com/sunny-sl/p/11236280.html 1. git本地版本回退 Git reset --hard commit_id(可用 git lo ...

  9. Windows Server 2008 R2 IIS7.5配置FTP图文教程

    本文为大家分享了IIS 配置FTP 网站的具体过程,供大家参考,具体内容如下 说明:服务器环境是Windows Server 2008 R2,IIS7.5. 1. 在 服务器管理器的Web服务器(II ...

  10. 【jquery】【jqGrid】设置不能多选

    onSelectAll:function(rowids,statue){ layui.layer.msg("请选择单条记录"); $("#jqGrid").jq ...