做用域插槽

時間 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>

相關標籤/搜索