作用域插槽模板迭代的次数，取决于组件内部独立slot的数量

时间：2019-09-07 12:02:15 阅读：98 评论：0 收藏：0 [点我收藏+]

第一种情况：内部有两个独立插槽（模板自动迭代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的数量

原文：https://www.cnblogs.com/qqhfeng/p/11479386.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)