插槽的使用

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

哎一古哎一古

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

阅读量137

点赞数

本文链接：https://blog.csdn.net/weixin_46044574/article/details/104752846

版权

插槽就是Vue实现的一套内容分发的API，将元素作为承载分发内容的出口。
例如

<body>
    <div id="app">
        <child-component>你好</child-component>
    </div>
    <script>
        Vue.component('child-component',{
            template:`
                <div>Hello,World!
                </div>
            `
        })
        let vm = new Vue({
            el:'#app',
            data:{
    
            }
        })
    </script>
</body>

输出内容还是在组件中的内容，在 child-component内写的内容没起作用。

<body>
    <div id="app">
        <child-component>你好</child-component>
    </div>
    <script>
        Vue.component('child-component',{
            template:`
                <div>Hello,World!
                <slot></slot>
                </div>
            `
        })
        let vm = new Vue({
            el:'#app',
            data:{
    
            }
        })
    </script>
</body>

我们现在给组件增加一个插槽
我们在内写的"你好"起作用了！！！

二，具名插槽

**
具名插槽，就是给插槽起名字
一个不带 name 的出口会带有隐含的名字“default”。
在向具名插槽提供内容的时候，我们可以在一个元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称：例如：
其他形式

<body>
    <div id="app">
        <child-component>
            <template slot="header">
                漂亮、美丽、购物、逛街
            </template>
            <template slot="footer">
                帅气、才实
            </template>
            <div>
                我是人，
                我是默认的插槽
            </div>
        </child-component>
    </div>
    <script>
        Vue.component('child-component',{
            template:`
                <div>
                <h4>这个世界不仅有男人和女人</h4><br>
                <slot name="header"></slot><br>
                <slot></slot><br>
                <slot name="footer"></slot><br>
                </div>
            `
        })
        let vm = new Vue({
            el:'#app',
            data:{
    
            }
        })
    </script>
</body>

三，作用域插槽

有时让插槽内容能够访问子组件中才有的数据是很有用的。就是在组件上的属性，可以在组件元素内使用

<body>
    <div id="app">
        <slot_demo v-slot:default="{user}">
                {{user.firstName}}
        </slot_demo>
    </div>
    <script>
        Vue.component('slot_demo',{
            data: function() {
               return {
                   user : {
                       firstName: "Liu",
                       lastName: "Tao"
                   }
                }
            },
            //首先要在子组件中<slot> 元素上动态绑定一个你要在外面访问的 对象属性
            template : `
               <span>
                  <span>子组件：</span>
                  <slot :user="user">{{ user.lastName }}</slot>
                </span>
            `
        })
        let vm = new Vue({
            el:'#app',
            data:{
    
            }
        })
    </script>
</body>

总结：如果父组件 <slot_demo v-slot:default="{user}">
{{user.firstName}}
</slot_demo>
结果：Liu
如果父组件<slot_demo v-slot:default="{user}">
</slot_demo>
结果：Tao
如果子组件没有绑定user对象，那么上面代码中的user就是取的这里面的默认值。例：

<body>
    <div id="app">
        <slot_demo v-slot:default="{user={firstName:'hussddd'}}">
            {{user.firstName}}
        </slot_demo>
    </div>
    <script>
        Vue.component('slot_demo', {
            data: function () {
                return {
                    user: {
                        firstName: "Liu",
                        lastName: "Tao"
                    }
                }
            },
            template: `
               <span>
                  <span>子组件：</span>
                  <slot ></slot>
                </span>
            `
        })
        let vm = new Vue({
            el: '#app',
            data: {

            }
        })
    </script>
</body>

下面是脚手架里作用域插槽的基本用法
在这里插入图片描述
父组件是demo.vue
子组件是User.vue
demo.vue

<template>
    <div class="demo">
        <!-- 子组件 -->
        <user v-slot:default="slotProps">
            {{slotProps.user.firstName}}
        </user>
    </div>
</template>
<script>
import User from "../components/User.vue"
export default {
    name:"app",
    components:{User}
}
</script>

User.vue

<template>
    <div>
        <span>子组件：</span>
        <!-- 作用域插槽 -->
        <slot :user="user">
            <!-- 后备内容 -->
             {{user.lastName}} 
        </slot>
    </div>
</template>
<script>
export default {
    data() {
        return {
            user:{
                firstName:"张",
                lastName:"三"
            }
        }
    },
}
</script>

哎一古哎一古

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
插槽的使用

插槽就是Vue实现的一套内容分发的API，将元素作为承载分发内容的出口。例如<body> <div id="app"> <child-component>你好</child-component> </div> <script> Vue.component('child...
复制链接

扫一扫