vue4-props（单项数据流）、slot（插槽、具名插槽）

最新推荐文章于 2023-07-20 01:34:08 发布

别狗了

最新推荐文章于 2023-07-20 01:34:08 发布

阅读量302

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_43010586/article/details/104432845

版权

本文深入探讨Vue4中的props特性，讲解如何实现单向数据流，并详细阐述slot的概念，包括基本插槽和具名插槽的使用方法，帮助开发者更好地理解和应用组件间的交互。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <!-- 
        props:组件的属性（类似于函数的参数，驼峰式命名-html里横线连接）,
            父组件向子组件传递数据（单项数据流），反过来不行，
            意思就是用的组件（样式）展示出你想展示出的数据，
            而prop对应的数据类似于属性，然后用v-bind:绑定,
            template也该为相应属性名
        v-for: v-bind:key=''  --用的时候需要加key属性来表序号（因为有些时候可能会渲染补上没有反应,
            vue的本质就是最小程度上减少操作，js本质是需要覆盖的时候，先把原来的删除，
            再加上现在的，而vue是看你以前有，就不给你删了，然后和再把没有的加上，
            有些情况可能会因为元素相似而渲染不上，所以要有Key属性）
        v-bind:title='15'  简写：:title='15'