Vue组件之插槽

最新推荐文章于 2024-05-28 17:25:55 发布

Akimoto Hiroshi

最新推荐文章于 2024-05-28 17:25:55 发布

阅读量601

点赞数

分类专栏： vue 文章标签： vue javascript

本文链接：https://blog.csdn.net/dyw3390199/article/details/111312638

版权

vue 专栏收录该内容

102 篇文章 5 订阅

订阅专栏

不具名插槽

<body>
    <div id="app">
        <test-slot></test-slot>
        <test-slot>Server Error</test-slot>
    </div>
    <script>
        Vue.component('test-slot',{
            template:`
                <div>
                    <strong>Error:</strong>
                    <slot>Default Info</slot>
                </div>
            `
        })
        var vm = new Vue({
            el:'#app',
            data:{

            },
            methods:{
                
            }
        })
    </script>
</body>

效果：
在这里插入图片描述

具名插槽

在这里插入图片描述

具名插槽的一般用法

<body>
    <div id="app">
        <base-layout>
            <p slot="header">This is header</p>
            <div>
                {{ msg }}
            </div>
            <p slot="footer">This is footer</p>
        </base-layout>
    </div>
    <script>
        Vue.component('base-layout',{
            template:
            `
                <div>
                    <header>
                        <slot name="header"></slot>
                    </header>
                    <main>
                        <slot></slot>
                    </main>
                    <footer>
                        <slot name="footer"></slot>
                    </footer>    
                </div>
            `
        })
        var vm = new Vue({
            el:'#app',
            data:{
                msg:'this is main content'
            },
            methods:{
                
            }
        })
    </script>
</body>

在这里插入图片描述

具名插槽的另一种用法template包裹多个内容

<body>
    <div id="app">
        <base-layout>
            <template slot="header">
                <p>header p1</p>
                <p>header p2</p>
                <button>Header Button</button>
            </template>
            <template>
                <p>content1</p>
                <textarea name="" id="" cols="30" rows="10"></textarea>
                <p>content2</p>
            </template>
            <template slot="footer">
                <a href="">footer a</a>
                <p>footer</p>
                <button>Footer Button</button>
            </template>
        </base-layout>
    </div>
    <script>
        Vue.component('base-layout',{
            template:
            `
                <div>
                    <header>
                        <slot name="header"></slot>
                    </header>
                    <main>
                        <slot></slot>
                    </main>
                    <footer>
                        <slot name="footer"></slot>
                    </footer>    
                </div>
            `
        })
        var vm = new Vue({
            el:'#app',
            data:{
                msg:'this is main content'
            },
            methods:{
                
            }
        })
    </script>
</body>

在这里插入图片描述
效果：

作用域插槽（了解一下，因为deprecated）

使用场景:父组件对子组件的内容进行加工处理
在这里插入图片描述
我们先看一个例子：

<body>
    <div id="app">
        <test-list :data="list">

        </test-list>
    </div>
    <script>
        Vue.component('test-list',{
            props:['data'],
            template:`
                    <div>
                        <ul>
                            <li :key="index" v-for="(item,index) in data">  
                                    {{ item.id + '--' + item.name }}
                            </li>
                        </ul>
                    </div>
            `
        })
        var vm = new Vue({
            el: '#app',
            data: {
                list: [{
                    id: 1,
                    name: 'Vue'
                }, {
                    id: 2,
                    name: 'React'
                }, {
                    id: 3,
                    name: 'Angular'
                }]
            },
            methods: {

            }
        })
    </script>
</body>

效果：
在这里插入图片描述
我们现在使用作用域插槽改动一下上面的代码：

<style type="text/css">
    .current{
        color: orangered;
    }
    </style>
<body>
    <div id="app">
        <test-list :data="list">
            <template slot-scope="slotProps">
                <strong v-if="slotProps.info.id=='2'" class="current">{{ slotProps.info.name }}</strong>
                <span v-else>{{ slotProps.info.name }}</span>
            </template>
        </test-list>
    </div>
    <script>
        Vue.component('test-list',{
            props:['data'],
            template:`
                    <div>
                        <ul>
                            <li :key="index" v-for="(item,index) in data">  
                                <slot :info="item"></slot>
                            </li>
                        </ul>
                    </div>
            `
        })
        var vm = new Vue({
            el: '#app',
            data: {
                list: [{
                    id: 1,
                    name: 'Vue'
                }, {
                    id: 2,
                    name: 'React'
                }, {
                    id: 3,
                    name: 'Angular'
                }]
            },
            methods: {

            }
        })
    </script>
</body>

在这里插入图片描述
效果：

这样就在父组件中操作了子组件传递过来的数据(进行了判断)

Akimoto Hiroshi

关注

0
点赞
踩
0

收藏

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

不具名插槽<body> <div id="app"> <test-slot></test-slot> <test-slot>Server Error</test-slot> </div> <script> Vue.component('test-slot',{ template:` &
复制链接

扫一扫

专栏目录