第一种情况：内部有两个独立插槽（模板自动迭代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. IT项目经理都需要具备哪些能力

    发布时间:05-2009:24优质原创作者 项目经理是IT行业中比较常见的职位,工作职责主要包括三个方面,其一是资源整合任务:其二是沟通协调任务:其三是保障项目的时间周期. 资源整合能力是项目经理的重 ...

  2. save tracking results into csv file for oxuva long-term tracking dataset (from txt to csv)

    save tracking results into csv file for oxuva long-term tracking dataset (from txt to csv) 2019-10-2 ...

  3. jdk8 stream实现sql单表select a,b,sum(),avg(),max() from group by a,b order by a,b limit M offset N及其性能

    之所以要测该场景,是因为merge多数据源结果的时候,有时候只是单个子查询结果了,而此时采用sql数据库处理并不一定能够合理(网络延迟太大). 测试数据10万行,结果1000行 limit 20 of ...

  4. MLflow系列2：MLflow追踪

    英文链接:https://mlflow.org/docs/latest/tracking.html 本文链接:https://www.cnblogs.com/CheeseZH/p/11945089.h ...

  5. dashi 成长 > 领导 > 平台 > 钱 人品 态度 能力 价值

    https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=thy3557s https://www.aliyun.com/min ...

  6. php-7.3.4 configure: error: Please reinstall the libzip distribution

    php-7.3.4 configure: error: Please reinstall the libzip distribution # wget https://libzip.org/downl ...

  7. Java基础 awt Frame 设置窗体的背景颜色

        JDK :OpenJDK-11      OS :CentOS 7.6.1810      IDE :Eclipse 2019‑03 typesetting :Markdown   code ...

  8. kotlin基础 常见容器的取值范围

  9. JAVA获取树形结构

    package com.nnmzkj.common.dto; import lombok.Data; import java.io.Serializable;import java.util.Arra ...

  10. Android NDK编译选项设置

    Android NDK编译选项设置 网易加固关注 0.5472016.08.22 14:07:00字数 3,034阅读 6,805 在Android NDK开发中,有两个重要的文件:Android.m ...