Vu3中插槽的使用

作者: 温新

分类: 【Vue.js】

阅读: 2079

时间: 2021-08-08 13:17:54

作者：温新

时间：2021-08-08

hi，我是温新，一名PHPer

如何去理解Vue3中的插槽？Laravel中有模板继承，简单的理解，把插槽当做Larave中的模板继承，不一定很合适，但是非常适用，再细一点，当做Laravel中的yield来看待。

本篇记录的案例中，再同一个位置展示不同的模板内容。

<!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">
    <global-component>
        <h3>自如初</h3>
        <p>{{ webUrl }}</p>
    </global-component>
    <global-component>
        <h3>PHPer</h3>
        <p>{{ webName }}</p>
    </global-component>    
</div>

<!-- 子组件 -->
<template id="com1">
    <div>
        <!-- 定义插槽，插槽中可以有默认的东西 -->
        <span @click="slotClick">
            <slot>
                <p>我是插槽默认的东西</p>
            </slot> 
        </span>

        <hr>
    </div>
 </template>

<script>
    const app = Vue.createApp({
        data() {
            return {
                webUrl:'https://www.ziruchu.com',
                webName:'个人博客'
            }
        }
    });

    app.component('globalComponent',{
        template:'#com1',
        methods:{
            slotClick(){
                alert('插槽中使用事件')
            }
        }
    });

    app.mount('#app');
</script>

</body>
</html>

注意点：

1）插槽是无法使用事件，若要使用事件，可以在外层包裹一个标签。本案中使用了span，为插槽绑定事件，因此点击插槽中的任意元素，都会触发事件；

2）插槽使用了绑定数据，就看在哪个组件中使用了插槽，那么这个数据就来自于使用插槽的这个组件。

我是温新

第天进步一点，就一点点

请登录后再评论