第一种情况：内部有两个独立插槽（模板自动迭代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. 如何查看android studio sdk路径配置

    file–>Other Settings–>Default Project Structure

  2. node.js GET与POST请求

    node.js GET与POST请求 转 http://www.voidcn.com/article/p-ncglaiqx-bdx.html 标签 get post node.js 栏目 Node.j ...

  3. ios兼容性收集整理

    1. ios系统兼input输入框光标问题 异常现象:苹果手机文本输入框样式异常——光标聚焦到文本框,光标高度充满文本框,输入内容,光标高度为文本框上边框到输入内容底部: 光标聚焦: 输入内容: 异常 ...

  4. fgets注意事项

    这是yjy的习题库,中途我在使用fgest时颇费了一点心思,特此记录一下. #include <stdio.h> #include <string.h> #include &l ...

  5. dlib-android

    https://travis-ci.org/tzutalin/dlib-android https://github.com/tzutalin/dlib-android-app https://git ...

  6. Sword CRC算法原理

    CRC校验原理 CRC校验其根本思想a.发送端和接收端约定一个整数 bb.发送端在原始数据帧后面附加一个数 k ,产生一个新的数据帧c.接收端接收到数据帧后,对接收的数据帧和整数 b 进行位异或操作, ...

  7. redis报错OOM command not allowed when used memory > 'maxmemory'

    登录到redis上查询 ./redis-cli -h IP -p port -a passwd redis>info memory 查询,内存已耗尽 查询配置文件,发现之前配置最大内存的策略设置 ...

  8. nginx 安装 ssl 证书

    nginx 安装 ssl 证书 关键词: pem 转 crt , 证书续期, nginx 部署 ssl 证书, 解决 SSL23_GET_SERVER_HELLO 错误. 之前免费申请的 1年的证书过 ...

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

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

  10. 【数据集】WiderFace-A Face Detection Benchmark

    前言 参考 1.WiderFace; 完