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

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

posted on 2019-09-07 10:16 qqhfeng16 阅读(264) 评论(0) 编辑收藏举报