第一种情况：内部有两个独立插槽（模板自动迭代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. MyBatis(六)：Mybatis Java API编程实现一对多、一对一

    最近工作中用到了mybatis的Java API方式进行开发,顺便也整理下该功能的用法,接下来会针对基本部分进行学习: 1)Java API处理一对多.多对一的用法: 2)增.删.改.查的用法: 3) ...

  2. How to Install Ruby on CentOS/RHEL 7/6

    How to Install Ruby on CentOS/RHEL 7/6 . Ruby is a dynamic, object-oriented programming language foc ...

  3. 图形化SQL JOIN

  4. CRM 负责人 选择

    CRM 负责人 参与 - 搜狗搜索https://www.sogou.com/sgo?query=CRM+%E8%B4%9F%E8%B4%A3%E4%BA%BA+%E5%8F%82%E4%B8%8E& ...

  5. LocalDateTime

    @Component public class DateUtil { public final static String EMPTY_SRING = ""; public fin ...

  6. Windows SVN迁移到Linux 服务器

    一.备份VisualSVN项目 1. 现在要使用Linux作为svn服务器,之前是在windows Server 2008上的,用的是VisualSVN, 如下图所示. 2. 现在svn中有一个项目f ...

  7. WOS免费查的办法

    SCI期刊IF是我们很多人投稿时的考虑因素之一,但每年的IF在6月份左右才会发布,2017年6月将会发布2016年的IF,这就会对很多同学投稿造成一定的影响. 比如你现在准备在明年3月份投稿,这个时候 ...

  8. 【ARM-Linux开发】Makefile 使用总结

    Makefile 使用总结 1. Makefile 简介 Makefile 是和 make 命令一起配合使用的. 很多大型项目的编译都是通过 Makefile 来组织的, 如果没有 Makefile, ...

  9. WeakReference Reference ReferenceQueue

    public class WeakReference<T> extends Reference<T> { public WeakReference(T referent) { ...

  10. PHP多进程编程初步

    转自:https://www.pureweber.com/article/php-multi-process-programming-preview/ 羡慕火影忍者里鸣人的影分身么?没错,PHP程序是 ...