Vue 插槽具名插槽

最新推荐文章于 2024-05-09 20:47:18 发布

Take^that

最新推荐文章于 2024-05-09 20:47:18 发布

阅读量273

点赞数

分类专栏：前端文章标签： slot

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

版权

前端专栏收录该内容

85 篇文章 0 订阅

订阅专栏

Vue中文文档

案例、
代码：

<body>

    <div id='root'>
        <child content='<p> Dell</p>'></child>
    </div>

    <script>
        Vue.component('child',{
            props:['content'],
            template:`<div>
                            <p>hello</p>
                            <div v-html="this.content"></div>
                      </div>`
        });

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

</body>

在这里插入图片描述
上图中外层多出了一个div标签这就是通过content传值无法避免的一个小问题

下面引入插槽：
当我们的子组件有一部分内容是根据父组件传递过来的dom元素来显示的时候，这就需要用到插槽了

通过插槽可以更方便的向子组件传递dom元素

1.代码实现：

<body>

    <div id='root'>
        <child>
            <!--slot标签显示的内容是什么   就是父组件向子组件 插入进去的这段标签  -->
            <p>today doesn`t exist</p>
        </child>
        <!-- <child>                
            <h1>test</h1>
        </child> -->
    </div>

    <script>
        Vue.component('child',{
            /*
            子组件的模板里面 Vue内置的slot语法   
                slot这个标签显示的内容是什么   就是父组件向子组件 插入进去的那段p标签
            */
            template:`<div>
                            <p>hello</p>
                            <slot>默认内容</slot>
                      </div>`
        });

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

</body>

在这里插入图片描述
2.具名插槽：

<body>

    <div id='root'>
        <body-content>
            <!--slot标签显示的内容是什么   就是父组件向子组件 插入进去的这段标签  -->
            <div class="header" slot='header'>header</div>
            <div class="footer" slot='footer'>footer</div>
        </body-content>
       
    </div>

    <script>
        Vue.component('body-content',{
            /*
            子组件的模板里面 Vue内置的slot语法   
                slot这个标签显示的内容是什么   就是父组件向子组件 插入进去的那段p标签
            */
            template:`<div>
                            <slot name ='header'></slot>
                            <div class ='content'>内容</div>
                            <slot name ='footer'></slot>
                      </div>`
        });

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

</body>

在这里插入图片描述
父组件调子组件(body-content)的时候，给子组件传了两个插槽的内容一个插槽的内容是

<div class="header" slot='header'>header</div

另一个插槽的内容是

<div class="footer" slot='footer'>footer</div>

第一个插槽叫header，另一个插槽叫footer 然后在子组件里面就可以用这两个插槽的内容了
先用了一个名字叫header的插槽再用名字叫footer的那个插槽

具名插槽还可以有默认值

Take^that

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue 插槽具名插槽

案例、代码：<body> <div id='root'> <child content='<p> Dell</p>'></child> </div> <script> Vue.component('child',{ ...
复制链接

扫一扫