作用域插槽——slotの学习笔记

最新推荐文章于 2022-06-09 10:28:24 发布

李振恒

最新推荐文章于 2022-06-09 10:28:24 发布

阅读量100

点赞数

分类专栏： # Vue初级

本文链接：https://blog.csdn.net/qq_45240616/article/details/103844977

版权

Vue初级专栏收录该内容

17 篇文章 0 订阅

订阅专栏

本文介绍了Vue中作用域插槽的概念，强调了其在允许插槽内容访问子组件内部数据方面的重要性，并提供了解构插槽Prop的推荐写法。

摘要由CSDN通过智能技术生成

作用域插槽

有时让插槽内容能够访问子组件中才有的数据是很有用的

 <div id="app">
		<parent>
        
            <template v-slot:test6='parentUsers'>{{parentUsers}}---{{parentUsers.user}}</template>

        </parent>
    </div>

 <script>
        var parent = {
            data:function(){
                return {
                    userdata:'p'
                }
            },
            template:`
            <div>
                <div><slot name='test6' v-bind:user="userdata"></slot></div>
            </div>
            `,
            
        }

        new Vue({
            el:'#app',
            data:{
            },
            components:{
                parent,
            },
            
        })

    </script>

结果
在这里插入图片描述
解构插槽 Prop
推荐写法

   <div id="app">
		<parent>
            <!-- rename重名名 -->
           <template v-slot:test6='{user,user:rename,users,heng={heng1:"hengtest"}}'>
                {{user}}<hr>
                {{rename}}<hr>
                {{users}}<hr>
                {{users.test1}}<hr>
                {{heng.heng1}}
            </template>
        </parent>
    </div>

  <script>
        var parent = {
            data:function(){
                return {
                    userdata:'p',
                    userdatas:{
                        test1:'11',
                        test2:'22'
                    },
                }
            },
            template:`
            <div>
                <div><slot name='test6' v-bind:user="userdata"  v-bind:users="userdatas" ></slot></div>
            </div>
            `,
            
        }

        new Vue({
            el:'#app',
            data:{
            },
            components:{
                parent,
            },
            
        })

    </script>