Vue中的作用域插槽 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue中的作用域插槽</title>
    <script src="./vue.js"></script>
</head>
<body>
<div id="root">
    <child>
        <template slot-scope="props"> <!--slot-scope="props"是存放item数据的-->
            <h1>{{props.item}}--hello</h1>
        </template>     <!--作用域插槽必须是template这个标签用来开头与结尾，同时声明一个属性接收子组件的数据
                            接收的数据是如何展示，根据业务需求自定义就可以了-->
    </child>
</div>
<script>
    Vue.component('child', {
        data: function () {
            return {
                list: [1, 2, 3, 4]
            }
        },
        template: '<div>' +
                    '<ul>' +
                        '<slot v-for="item of list" :item="item"></slot>'+
                    '</ul>' +
                  '</div>'
    });


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

 

posted @ 2018-11-23 10:30  alexbiu  阅读(653)  评论(0)    收藏  举报