做用域插槽

时间 2020-04-18

标签插槽繁體版

原文原文链接

当子组件作循环，或者某一部分dom结构应该由外部传递进来的时候用做用域插槽。
做用域插槽必须是template开头且结尾
slot-scope以及对应的自定义名字(这里是myprops)来接收传递过来的数据：javascript

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="./vue.js"></script>
    <!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script> -->
</head>
<body>
<div id="root">
    <child>
        <!-- 做用域插槽必须是template开头且结尾 -->
        <template slot-scope="myprops">
            <li>{{myprops.item}}</li>
        </template>
    </child>
</div>
<script type="text/javascript">
    Vue.component("child", {
        data: function() {
            return {
                list: [1, 2, 3, 4, 5, 6]
            }
        },
        template: `<div>
                        <ul>
                            <li v-for="item of list">{{item}}</li>
                        </ul>
                        <ul>
                            //这种方式的做用是：显示什么，怎么显示再也不是子组件决定了，而是父组件调子组件的时候给子组件传递模版:
                            <slot v-for="item of list" :item=item></slot>
                        </ul>
                    </div>`
    });

    var vm = new Vue({
        el: "#root"
    })
</script>
</body>
</html>