第一种情况：内部有两个独立插槽（模板自动迭代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. GEOS/GDAL 交叉编译ARM64-linux版本

    目录 安装编译环境 编译PROJ.4 编译GEOS 编译GDAL 编译后程序运行注意事项 因为试用华为云ARM64服务器(CentOS 7 操作系统)的时候,在云服务器上编译GDAL很长时间也没有编译 ...

  2. SQLServer len 函数， 查字符串长度函数

    declare @name char(1000) --注意:char(10)为10位,要是位数小了会让数据出错 set @name='s{sss}fc{fggh}dghdf{cccs}x' selec ...

  3. Android 自己实现更新下载自动安装

    1.一些公司开发完一款App之后可能并不会去上架App商店,但事后期也需要定时进行维护更新,所以会选择把打包好的apk 发布到自己的服务器,然后在数据库建一个版本号的表,然后剩下的就交给你androi ...

  4. 运维笔记--Docker环境ubuntu系统安装指定版本python[3.6]

    场景描述: 直接安装出现如下异常: root@ae2d02e458f3:/home# apt-get install python3.6 Reading package lists... Done B ...

  5. 如何解决Windows 10屏幕字体缩放模糊问题

    https://www.ithome.com/html/win10/374911.htm 笔者前段时间买了一台小米笔记本Pro,除了有字体模糊的问题外,还是比较满意的.这台笔记本是15.6英寸,108 ...

  6. react问题You must install peer dependencies yourself.

    npm WARN react-native@0.46.4 requires a peer of react@16.0.0-alpha.12 but none is installed. You mus ...

  7. python - logging.basicConfig format参数无效

    有这么一段python代码 import threading import time import requests from decimal import Decimal, ROUND_DOWN i ...

  8. Min-Max容斥及其推广和应用

    概念 Min-Max容斥,又称最值反演,是一种对于特定集合,在已知最小值或最大值中的一者情况下,求另一者的算法. 例如: $$max(a,b)=a+b-min(a,b) \\\ max(a,b,c)= ...

  9. DevOps - 基础设施配置测试工具Serverspec

    1 - Serverspec Serverspec是可以测试基础设施配置的工具,能够验证配置管理工具(Ansible.Puppet.Chef等)的配置结果,可以实现基础设施测试代码化自动化. 测试代码 ...

  10. jquery预加载显示百分比

    jquery预加载显示百分比 <pre> <img class="bj loadimg" loadimg="/weiqingshu/images/1/b ...