Vue组件高级 插槽的使用slot

Posted 2021-09-07 HUMILITY

slot的基本使用

• 组件的插槽是为了让封装的组件更加具有扩展性
• 让使用者可以决定组件内部的一些内容到底展示什么

• 如何去封装这类的组件 使用slot

  • 如果每一个单独去封装一个组件，显然不合适；比如每个页面都返回，这部分就要重复封装
  • 但是，如果封装成一个，也不合理，有些左侧是菜单，有些是返回等等

• 如何封装合适

  • 抽取共性，保留不同
  • 最好的封装方式就是将共性抽取到组件中，将不同暴露为插槽
  • 一旦我们预留了插槽，就可以让使用者根据自己的需求，决定插槽中插入什么内容
• 插槽的基本使用<slot></slot>
• 插槽的默认值<slot><button></button></slot>

• 如果有多个值，同时放入到组件进行替换时，一起作为替换元素

    <div id="app">
        <cpn><button>按钮</button></cpn>
        <cpn><span>哈哈啊哈</span></cpn>
        <cpn><i>呵呵呵</i></cpn>
        <cpn></cpn>
    </div>
    <template id="cpn">
        <div>
            <h2>我是组件</h2>
            <p>hhhhh</p>
            <slot></slot>
            <!-- <slot><button></button></slot>      //如果使用多btn给插槽默认值button -->
        </div>
    </template>
    <script>
        var app = new Vue({
            el: \'#app\',    
            components: {
            cpn: {
                template: \'#cpn\'
                }
            }
        })    
    </script>
    

具名插槽的使用

给slot id 更易使用 区分插槽

    <div id="app">

        <cpn><span slot="center">标题</span></cpn>
        <cpn><button slot="left">返回</button></cpn>
    </div>
    <template id="cpn">
        <div>
            <slot name="left"><span>左边</span></slot>
            <slot name="center"><span>中间</span></slot>
            <slot name="right"><span>右边</span></slot>
        
        </div>    
    </template>
    <script>
        var app = new Vue({
            el: \'#app\',
            components: {
                cpn: {
                    template: \'#cpn\'
                }
            }
        })
    </script>    

作用域插槽

编译作用域

• 我们通过例子理解这个概念
• 首先考虑下面的代码是否可以渲染出来

　　*　<cpn v-show="isShow"></cpn>　中，我们使用了isShow属性
　　*　isShow属性包含在组件中，也包含在Vue实例中

*　可以渲染出来

　　*　官方给了一条准则：父组件模板的所有东西都会在父级作用域内编译，子组件模板的所有东西都会在子级作用域内编译。
　　*　而我们使用<cpn v-show="isShow"></cpn>时候，整个组件的使用过程相当于在父组件中出现的
　　*　那么他的作用域就是父组件，使用的属性也是属于父组件的属性
　　*　因此，isShow使用的是Vue实例中的属性，而不是子组件的属性

    <div id="app">

        <cpn v-show="isShow"></cpn>
    </div>
    <template id="cpn">
        <div>
            <h2>我是子组件</h2>
            <p>我是子组件哈哈哈</p>
        </div>
    </template>
    <script>
        var app = new Vue({
            el: \'#app\',
            data: {
                isShow: true
            },
            components: {
                cpn: {
                    template: \'#cpn\',
                    data() {
                        isShow: false
                    }
                }
            }
        })
    </script>    

作用域-插槽

*　作用域插槽是slot一个比较难理解的点
*　这里，我们用一句话对其做一个总结
　　*　父组件替换插槽的标签，但是内容由子组件来提供

<div id="app">
    <cpn></cpn>
    <cpn>
        <!-- 目的是获取子组件中的names 
    2.5.x以下 需要template模板，以上不用-->
        <template slot-scope="slot">
        <span v-for="item in slot.data">{{item}}-</span>
       </template>
    </cpn>
    <cpn>
        <template slot-scope="slot">
        <span>{{slot.data.join(\'*\')}}</span>
       </template>
    </cpn>

</div>
<template id="cpn">
    <div>
        <slot :data="names">
            <ul>
                <li v-for="item in names">{{item}}</li>
            </ul>
        </slot>
    </div>
</template>
<script>
    var app = new Vue({
        el: \'#app\',
        data: {},
        components: {
            cpn: {
                template: \'#cpn\',
                data() {
                    return {
                        names: [\'TOM\', \'JENY\', \'BOB\', \'DAD\']
                    }
                }
            }
        }
    })
</script>