Vue作用域插槽

最新推荐文章于 2022-09-15 22:47:43 发布

Take^that

最新推荐文章于 2022-09-15 22:47:43 发布

阅读量211

点赞数

分类专栏：前端文章标签：作用域插槽

本文链接：https://blog.csdn.net/qq_37767455/article/details/102502282

版权

前端专栏收录该内容

85 篇文章 0 订阅

订阅专栏

<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数据，然后上面的<child>就会用这个item
            item 就放在了slot-scope="props"中
            */
            template:`
                    <div>
                        <ul>
                            <slot
                                v-for="item of list"
                                :item=item>
                                
                            </slot>
                        </ul>
                    </div>
            `
        });

        /*
        当子组件里面做循环 或者他的某一部分dom zone 应该由外部传递过来时 使用作用域插槽
        使用作用域插槽 子组件可以向父组件的插槽里面传数据（如：上面的item）
        */
        var vm =new Vue({
            el:'#root' 
              
        })
    </script>


</body>

在这里插入图片描述

Take^that

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue作用域插槽

<body> <div id='root'> <child> <!-- 父组件调用子组件的时候，给子组件传了一个插槽这个插槽叫作用域插槽作用域插槽必须以 template开头和结尾同时这个插槽要声明你要从子组件接收的数据都放在哪...
复制链接

扫一扫