Vue3具名插槽与作用域插槽

作者: 温新

分类: 【Vue.js】

阅读: 3776

时间: 2021-08-08 15:45:21

作者：温新

时间：2021-08-08

hi，我是温新，一名PHPer

具名插槽

为插槽起一个名字便于更加的灵活使用，在布局中特别有用。对于模板分离，把公共区域独立成一个单独的组件，若还一些个别页面有单独的样式或js等，使用具名插槽吧。

本文案例模拟一个简单的布局。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>slot插槽的快速使用</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
    <layout-component>
        <template v-slot:header>
            <header>我是头部区域</header>
        </template>
        <template v-slot:footer>
            <footer>我是底部区域</footer>
        </template>
    </layout-component>
</div>

<template id="layout">
    <div>
        <h3>具名插槽的使用</h3>
        <slot name="header">头部</slot>
        <article>文章</article>
        <slot name="footer">底部</slot>
    </div>
 </template>

<script>

    const app = Vue.createApp({
    });
    app.component('layoutComponent',{
        template:'#layout',
    });
    app.mount('#app');
</script>

</body>
</html>

注意点：

1）组件中定义具名插槽使用<slot name='插槽名'></slot>

2）其它组件中使用具名插槽时必须使用template进行包裹并写上插槽名。

使用具名插槽时每次都要写v-slot特别麻烦，可以使用#进行简写，如下：

<div id="app">
    <layout-component>
        <template #header>
            <header>我是头部区域</header>
        </template>
        <template #footer>
            <footer>我是底部区域</footer>
        </template>
    </layout-component>
</div>

作用域插槽

调用插槽时需要访问该子组件的内容，这就涉及到作用域问题。

有A、B个组件，其中B组件中定义了插槽b1；A组件中调用了B组件，其中A使用了B组件中的b1插槽，A无法直接获取B组件b1插槽中所使用到的数据。但是，现在就是要在A组件中拿到该插槽的数据。直接看案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作用于插槽</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
    <demo-component v-slot="{item}">
        <!-- 注意：显示的是不同的元素 -->
        <div>{{ item }}</div>
        <!-- <p>{{ item }}</p>
        <span>{{ item }}</span> -->
    </demo-component>
</div>

<template id="demo">
    <div>
        <h3>作用于插槽</h3>
        <!-- 组件中遍历数据 -->
        <slot v-for="item in list" :item="item"></slot>
    </div>
 </template>

<script>

    const app = Vue.createApp({});

    app.component('demoComponent',{
        data () {
            return {
                // 该组件中插槽使用到的数据
                list:['PHP','Laravel','ThinkPHP']
            }
        },
        template:'#demo',
    });
    app.mount('#app');
</script>

</body>
</html>

我是温新

第天进步一点，就一点点

请登录后再评论