slot-插槽的基本使用

简介: slot-插槽的基本使用

slot-插槽的基本使用

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
    <!-- <i> 标签显示斜体文本效果。 -->
    <div id="app">
        <scpn></scpn>
        <scpn><button>按钮</button></scpn>
        <scpn>
            <i>呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵</i>
            <br>
            <button>按钮1</button>
            <button>按钮2</button>
        </scpn>
        <scpn>
            <button>按钮1</button>
            <button>按钮2</button>
            <button>按钮3</button>
        </scpn>
        <scpn></scpn>
    </div>

    <template id="lcpn">
        <div>
            <h1>哈哈哈</h1>
            <span>我来了</span>
            <br>
            <slot><h2>hhh</h2></slot>
            <!-- <slot></slot> -->
        </div>
    </template>
    <script src="../vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: "sb"
            },
            components: {
                scpn: {
                    template: '#lcpn',
                }
            }
        })
    </script>
</body>
</html>
目录
相关文章
|
7月前
|
JavaScript API
vue插槽slot、slot-scope、v-slot的区别以及嵌套插槽的使用
可以将 slot 理解成一个占位的东西,我们提前在模板中放置一个占位的标记,当其他地方要使用模板时就可以通过标记再传进来具体的内容,这样就可以实现更强的复用能力。
133 2
|
5月前
vue2 插槽(默认插槽 slot 、具名插槽 v-slot 、作用域插槽 slot-scope -- 插槽传值 )
vue2 插槽(默认插槽 slot 、具名插槽 v-slot 、作用域插槽 slot-scope -- 插槽传值 )
1083 1
|
5月前
|
自然语言处理 JavaScript 前端开发
|
7月前
|
JavaScript
#是啥,v-slot插槽的区别
#是啥,v-slot插槽的区别
113 1
|
7月前
Vue3系列教程之插槽slot详解
Vue3系列教程之插槽slot详解
84 0
|
JavaScript
Vue插槽 slot 标签
Vue插槽 slot 标签
132 0
|
7月前
|
JavaScript
Vue中的插槽Slot的使用说明
Vue中的插槽Slot的使用说明
51 1
|
7月前
|
JavaScript 前端开发
Vue中v-slot的作用是什么?有几种使用方式?
Vue中v-slot的作用是什么?有几种使用方式?
630 0
|
JavaScript
一文搞懂Vue3中slot插槽的使用!
前言 使用 Vue 的小伙伴相信你一定使用过插槽,如果你没有用过,那说明你的项目可能不是特别复杂。插槽(slot)可以说在一个 Vue 项目里面处处都有它的身影,比如我们使用一些 UI 组件库的时候,我们通常可以使用插槽来自定义我们的内容。 Vue3 已经推出很久了,也有越来越多的项目开始转向 Vue3 了,那么如果你对 Vue3 中的插槽还不熟悉,那么很有必要跟着本篇文章学习一下了!
1816 0
一文搞懂Vue3中slot插槽的使用!
|
JavaScript 前端开发
Vue系列教程(14)- 插槽(slot)
Vue系列教程(14)- 插槽(slot)
72 0