超详细vue组件开发（三）--slot插槽

最新推荐文章于 2024-08-18 10:54:05 发布

qq_39586440

最新推荐文章于 2024-08-18 10:54:05 发布

阅读量326

点赞数 2

分类专栏：前端文章标签： vue javascript 组件化

本文链接：https://blog.csdn.net/qq_39586440/article/details/110563294

版权

文章目录

前言
一、slot的基本使用
二、具名插槽
三.作用域插槽
总结

前言

上一篇介绍了组件之间的相互访问，不同于组件通信的是：通过props和this.$emit()只能传递数据；而访问除了数据还可以访问组件内部的方法。
接下来介绍组件插槽slot的运用。slot包括基本slot的使用、具名插槽以及作用域插槽。

一、slot的基本使用

首先介绍最基本的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>slot的使用</title>
    <script src="../../vue/vue.js" type="text/JavaScript" charset="utf-8"></script>
</head>
<body>

    <!--1、slot预留插槽，使用组件时填入特定内容
        2、slot可以提供默认值
    -->

    <div id="app">
        <cpn><button>{
  {message}}</button></cpn>
        <cpn></cpn>
    </div>

    <template id="myCpn">
        <div>
            <h2>我是组件，下方预留插槽</h2>
            <slot>默认值</slot>
            <slot>默认值</slot>
        </div>
    </template>

最低0.47元/天解锁文章

qq_39586440

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
超详细vue组件开发（三）--slot插槽

文章目录前言一、slot的基本使用二、具名插槽三.作用域插槽总结前言上一篇介绍了组件之间的相互访问，不同于组件通信的是：通过props和this.$emit()只能传递数据；而访问除了数据还可以访问组件内部的方法。接下来介绍组件插槽slot的运用。slot包括基本slot的使用、具名插槽以及作用域插槽。一、slot的基本使用首先介绍最基本的slot使用，让大家了解插槽是什么。组件的特性就是可复用，这也是开发组件的目的，但是不同的应用场景对组件的需求也不尽相同。这时，slot就允许我们替换掉插槽
复制链接

扫一扫