vuejs插槽（vue插槽用法）



        Vue.js 的插槽 (Slots) 是一种强大的功能，允许您定义可重用的模板片段，然后在组件的多个位置插入这些片段。通过插槽，您可以构建复杂的组件结构，同时保持代码的清晰和可维护性。

插槽是基于组件的所以要有组件

父页面

<template>
    <div>
        <h1>{{ key }}</h1>
        <hr/>
        <!--
         slot:插槽 ,可以用于在父组件中 传1段 Html 到子组件中的指定位置
        -->
        <ShowPage>
          
        </ShowPage>
        
    </div>
</template>

<script>
    
    import ShowPage from 'https://blog.csdn.net/shark1978/article/components/ShowPage.vue' ;
    
    export default {
        name: 'Test6',
        data () {
            return {
              key: '测试6-组件测试'
            }
        },
        components: {
            ShowPage
        }
    }
</script>

子组件

<template>
    <div>
        <h2>{{ key }}</h2>
        
        <div class='default'>
            
        </div>
        
        <hr/>
    </div>
</template>

<script>
    export default {
        name: 'ShowPage',
        data () {
            return {
              key: 'slot测试'
            }
        }
    }
</script>

在父页面的 ShowPage 标签中 加入

<div style="color: red;">
                新的一天
            </div>

在子组件的 class='default' div中加入 

<slot></slot>

就可以把父页面中定义的 红色的"新的一天" 加入到子组件中不需要传值。

您还可以定义具名插槽，这样您可以在父组件中明确指定要插入到哪个插槽的内容。

父页面加入：

<template v-slot:blue>
                <div style="color: blue;">
                    蓝蓝的天 
                </div>
            </template>

子组件中加入：

<h3>
            <slot name="blue"></slot>
        </h3>

就可以把父页面中定义的 蓝色的"蓝蓝的天" 加入到子组件中的h3标签中，

如果不指明就会加到 class='default' 的div标签中。

为此，您可以定义一个作用域插槽。（作用域插槽就是具名插槽的的扩展）

父页面修改：

<template v-slot:blue="{title}">
                <div style="color: blue;">
                    蓝蓝的天 -- {{ title }}
                </div>
            </template>

子组件修改：

<h3>
            <!-- 把子组件的属性返回给父组件 -->
            <slot name="blue" :title="key"></slot>
        </h3>

就可以把子组件中定义的 key 的内容传给父组件拼到 蓝蓝的天 -- 的后面

然后再传回加入到子组件中的h3标签中。

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/59035.html