Vue中slot的使用

最新推荐文章于 2024-04-02 16:07:42 发布

轻狂的书生

最新推荐文章于 2024-04-02 16:07:42 发布

阅读量256

点赞数

文章标签： vue javascript 列表

本文链接：https://blog.csdn.net/qg2276879379/article/details/108052205

版权

本文详细介绍了Vue.js中插槽(slot)的使用方法，包括单个和多个未命名插槽、具名插槽以及作用域插槽的实现原理和应用场景。通过实例展示了如何在父组件中动态替换子组件的内容，以及如何利用作用域插槽实现数据的子传父传递。

摘要由CSDN通过智能技术生成

前言：

当我们想动态替换子组件模板template中的内容时，我们就需要使用slot插槽

1.组件中有单个或多个未命名slot标签时

<div id='app'>
        <cpn>
            <button>按钮</button>
        </cpn>
        <cpn>
            <p>handsomeboy</p>
            <p>pyq</p>
        </cpn>
        <cpn>
            <span>span标签</span>
        </cpn>
        <cpn>
            <div>我是几个元素放一起的插槽1</div>
            <p>我是几个元素放一起的插槽2</p>
            <span>我是几个元素放一起的插槽3</span>
        </cpn>
        <cpn></cpn>
        <cpn></cpn>
    </div>
    <template id='cpn'>
        <div>
            <h2>我是子组件</h2>
            <slot>
                <p>slot默认值</p>
            </slot>
        </div>
    </template>

效果：

在这里插入图片描述

2.组件中有多个命名的slot插槽(具名插槽)时，可以实现父组件对子组件的指定位置显示内容或传参

 <div id='app'>
      <cpn>
          <p>123</p>
        </cpn>
    </div>
    <template id='cpn'>
        <div>
            <slot name="left">左边</slot>
            <slot name="middle">中间</slot>
            <slot name="right">右边</slot>
            <!-- 没指定name多个元素会全部替换 -->
            <slot>下边</slot>
            <slot>pyq</solt>
        </div>
    </template>

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

3.作用域插槽

使用时候子组件标签中要加标签，通过scopeName.childProp调用子组件模板中的childProp绑定的数据它是一种子传父传参的方式，能够解决普通slot在parent中无法访问child数据的问题；

作用域插槽代表性的用例是列表组件，允许在parent父组件上对列表项进行自定义显示，如下该items的所有列表项都可以通过slot定义后传递给父组件使用，也就是说数据是相同的，不同的场景页面可以有不同的展示方式：

<div id='app'>
       <cpn>
           <!--定义一个插槽，该插槽必须放在template标签内-->
        <template slot="item" slot-scope="props">
            <!-- 定义使用渲染方式 -->
            <li>li:{{props.myname}}</li>
    
          </template>
       </cpn>
       <cpn>
        <cpn>
            <template slot="item" slot-scope="props">
                <p>p:{{props.myname}}</p><!--定义不同的渲染方式-->
            </template>
        </cpn>

       </cpn>
    </div>
    <template id='cpn'>
        <div>
            <slot>
                <ul>
    
                    <slot name="item" v-for="item in items"  :myname="item" >
              
                       slot的默认内容
              
                    </slot>
              
                 </ul>
            </slot>
        </div>
    </template>
    <script>
        let vm = new Vue({
            el: '#app',
            //数据
            data: {
            },
            //方法集合
            methods: {
            },
            components: {
                cpn: {
                    template: `#cpn`,
                    data() {
                        return {
                            items:[1,2,3,4,5]
                        }
                    }
                }
            }
        
        })
    </script>