Vue作用域插槽

<body>
    <div id='root'>
        <child>
            <!-- 父组件调用子组件的时候,给子组件传了一个插槽 这个插槽叫作用域插槽 
                    作用域插槽必须以 template开头和结尾
                同时这个插槽要声明 你要从子组件接收的数据都放在哪   这里是放在props里面了
                    还要告诉子组件模板的信息 即接收的props怎么展示数据 -->
            <template slot-scope="props">
                <!-- <li>{{props.item}} -- Tony</li> -->

                <h4>{{props.item}} -- Tony</h4>

            </template>
        </child>
    </div>

    <script>
       
        Vue.component('child',{
            data:function(){
                return {
                    list:[1,2,3,4]
                }
            },
            /*child组件做一个列表的循环,但列表中的每一项怎么显示由外部告知
            *子组件用slot时会往slot里面传一个item数据,然后上面的就会用这个item
            item 就放在了slot-scope="props"中
            */
            template:`
                    
`
}); /* 当子组件里面做循环 或者他的某一部分dom zone 应该由外部传递过来时 使用作用域插槽 使用作用域插槽 子组件可以向父组件的插槽里面传数据(如:上面的item) */ var vm =new Vue({ el:'#root' }) </script> </body>

Vue作用域插槽_第1张图片

你可能感兴趣的:(#,Vue,作用域插槽)