【vue】slot插槽的基础知识与使用

-4444x-

于 2021-03-01 15:26:28 发布

324

分类专栏： vue.js 文章标签： vue.js slot插槽

本文链接：https://blog.csdn.net/qq_43490212/article/details/114259500

版权

vue.js 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

文章目录

一：插槽的基本使用

1：为什么要使用slot

slot翻译为插槽:
在生活中很多地方都有插槽，电脑的USB插槽，插板当中的电源插槽。
插槽的目的是让我们原来的设备具备更多的扩展性。
比如电脑的USB我们可以插入U盘、硬盘、手机、音响、键盘、鼠标等等。
组件的插槽︰
组件的插槽也是为了让我们封装的组件更加具有扩展性。
让使用者可以决定组件内部的一些内容到底展示什么。
eg∶移动网站中的导航栏。
移动开发中，几乎每个页面都有导航栏。
导航栏我们必然会封装成一个插件，比如nav-bar组件。
一旦有了这个组件，我们就可以在多个页面中复用了。
每个页面的导航是一样的吗?No
如何去封装这类的组件呢?
它们也很多区别，但是也有很多共性。
如果，我们每一个单独去封装一个组件，显然不合适︰比如每个页面都返回，这部分内容我们就要重复去封装。但是，如果我们封装成一个，好像也不合理∶有些左侧是菜单，有些是返回，有些中间是搜索，有些是文字，等等。
如何封装合适呢?
抽取共性，保留不同。
最好的封装方式就是将共性抽取到组件中，将不同暴露为插槽。
一旦我们预留了插槽，就可以让使用者根据自己的需求，决定插槽中插入什么内容。
是搜索框，还是文字，还是菜单。由调用者自己来决定。

<body>
    <!-- 1:提供接收Vue数据的容器 -->
    <div id='app'>
        <!-- 在组件添加按钮 -->
        <cpn>
            <button>按钮一</button>
        </cpn>
        <!-- 添加输入框 -->
        <cpn>
            登录名<input type="text">
        </cpn>
    </div>


    <!-- 2:导入vue.js文件 -->
    <script src='./js/vue.js'></script>

    <template id="mycpn">
        <div>
            <h1>好好学习，天天向上</h1>
            <!-- 插槽的位置，除了共有的文字，还可以添加不同的属性 -->
            <slot></slot>
        </div>
    </template>



    <!-- 3:使用Vue语法 -->
    <script>
        const vm = new Vue({
            el: '#app',
            data: {},
            methods: {},
            components: {
                cpn: {
                    template: '#mycpn',

                }
            }
        })
    </script>
</body>

二：具名插槽的使用

当子组件的功能复杂时，子组件的插槽可能并非是一个。
比如我们封装一个导航栏的子组件，可能就需要三个插槽，分别代表左边、中间、右边。
那么，外面在给插槽插入内容时，如何区分插入的是哪一个呢?
这个时候，我们就需要给插槽起一个名字
如何使用具名插槽呢?
非常简单，只要给slot元素一个name属性即可
<slot name='myslot'></slot>

<body>
    <!-- 1:提供接收Vue数据的容器 -->
    <div id='app'>
        <cpn>
            <!-- 修改中间的文字 -->
            <span slot="center">
                这是修改过的中间
            </span>

        </cpn>
    </div>


    <!-- 2:导入vue.js文件 -->
    <script src='./js/vue.js'></script>

    <template id="mycpn">
        <div>
            <slot name="left"><span>左侧</span> </slot>
            <slot name="center"><span>中间</span> </slot>
            <slot name="right"><span>右侧</span> </slot>
        </div>
    </template>

    <!-- 3:使用Vue语法 -->
    <script>
        const vm = new Vue({
            el: '#app',
            data: {},
            methods: {},
            components: {
                cpn: {
                    template: '#mycpn',
                }
            }
        })
    </script>
</body>

三：作用域插槽的使用

官方给出了一条准则∶父组件模板的所有东西都会在父级作用域内编译;子组件模板的所有东西都会在子级作用域内编译。

父组件替换插槽的标签，但是内容由子组件来提供。

我们先提一个需求∶
子组件中包括一组数据，比如: pLanguages: [‘js’, ‘c++’, ‘java’, ‘node’, ‘vue’]
需要在多个界面进行展示∶
某些界面是以水平方向一一展示的
某些界面是以列表形式展示的
某些界面直接展示一个数组
内容在子组件，希望父组件告诉我们如何展示，怎么办呢?
利用slot作用域插槽就可以了

<body>
    <!-- 1:提供接收Vue数据的容器 -->
    <div id='app'>
        <cpn></cpn>

        <cpn>
            <!-- 父组件不可以直接访问到子组件的数据 -->
            <template slot-scope='slot'>
                <span v-for="(item,index) in slot.data">{{item}}——</span>
            </template>
        </cpn>
    </div>

    <template id="mycpn">
        <div>
            <slot :data='pLanguages'>
                <ul>
                    <!-- 将底下数据进行渲染 -->
                    <li v-for="(item,index) in pLanguages">{{item}}</li>
                </ul>
            </slot>
        </div>
    </template>


    <!-- 2:导入vue.js文件 -->
    <script src='./js/vue.js'></script>


    <!-- 3:使用Vue语法 -->
    <script>
        const vm = new Vue({
            el: '#app',
            data: {},
            methods: {},
            components: {
                cpn: {
                    template: '#mycpn',
                    data() {
                        return {
                            pLanguages: ['js', 'c++', 'java', 'node', 'vue']
                        }
                    }
                }
            }
        })
    </script>
</body>