VUE2.0学习记录——作用域插槽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作用域插槽</title>
</head>
<body>
<div id="app">
    <child></child>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    Vue.component('child',{
        data: function () {
            return {
                list: [1,2,3,4,5]
            }
        },
        template: '<div>' +
                    '<ul>' +
                        '<li v-for="item of list">{{item}}</li>' +
                    '</ul>' +
                    '</div>'
    });
    var app = new Vue({
        el: '#app'
    });
</script>
</html>

当li本身如何循环是由父组件决定时，就用到了作用域插槽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作用域插槽</title>
</head>
<body>
<div id="app">
    <child>
        <template slot-scope="props">
            <li>{{props.item}}-hello</li>
        </template>
    </child>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    Vue.component('child',{
        data: function () {
            return {
                list: [1,2,3,4,5]
            }
        },
        template: '<div>' +
                    '<ul>' +
                        '<slot v-for="item of list" :item="item"></slot>' +
                    '</ul>' +
                    '</div>'
    });
    var app = new Vue({
        el: '#app'
    });
</script>
</html>

来源：https://blog.csdn.net/baokx/article/details/99085913

标签

作用域

易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!