Vue插槽

最新推荐文章于 2024-07-26 13:02:41 发布

Bue_Sky

最新推荐文章于 2024-07-26 13:02:41 发布

阅读量213

点赞数

分类专栏： Vue 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/Bue_Sky/article/details/120449924

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Vue插槽使用

文章目录

Vue插槽使用
前言
一、插槽的使用场景
二、插槽使用方法 slot

前言

插槽的概念非常重要，大量的模块和插件中都有插槽的使用。

一、插槽的使用场景

父组件先子组件传递布局。

二、插槽使用方法 slot

1.插槽

<body>
    <div id="root">
       <child>
           <p>Dell</p>
       </child>
    </div>
    <script>
        Vue.component('child',{
            template:'<div><slot></slot></div>'
        })
        var vm = new Vue({
            el:'#root',
            methods:{
                childClick(){
                    alert('childClick')
                }
            }
        })
    </script>
</body>

2.具名插槽

代码如下（示例）：

<body>
    <div id="root">
       <child>
           <div class="header" slot="header">header</div>
           <div class="footer" slot="footer">footer</div>
       </child>
    </div>
    <script>
        Vue.component('child',{
            template:`<div>
                        <slot name='header'></slot>
                        <div class='content'>content</div>
                        <slot name='footer'></slot>
                      </div>`
        })
        var vm = new Vue({
            el:'#root',
            methods:{
                childClick(){
                    alert('childClick')
                }
            }
        })
    </script>
</body>

3.具名插槽默认

代码如下（示例）：

<body>
    <div id="root">
       <child>
           <!-- <div class="header" slot="header">header</div> -->
           <div class="footer" slot="footer">footer</div>
       </child>
    </div>
    <script>
        Vue.component('child',{
            template:`<div>
                        <slot name='header'>
                            <h1>default header</h>
                        </slot>
                        <div class='content'>content</div>
                        <slot name='footer'></slot>
                      </div>`
        })
        var vm = new Vue({
            el:'#root',
            methods:{
                childClick(){
                    alert('childClick')
                }
            }
        })
    </script>
</body>

4.作用域插槽

代码如下（示例）：

<body>
    <div id="root">
       <child>
           <template slot-scope="props">
                <li>{{props.item}}</li>
           </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',
            methods:{
                childClick(){
                    alert('childClick')
                }
            }
        })
    </script>
</body>

Bue_Sky

关注

0
点赞
踩
0

收藏

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

Vue插槽使用文章目录Vue插槽使用前言一、插槽的使用场景二、插槽使用方法 slot1.插槽2.具名插槽2.具名插槽默认前言插槽的概念非常重要，大量的模块和插件中都有插槽的使用。一、插槽的使用场景父组件先子组件传递布局。二、插槽使用方法 slot1.插槽<body> <div id="root"> <child> <p>Dell</p> </child>
复制链接

扫一扫

专栏目录