关于javascript:Vue组件高级-插槽的使用slot

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>