slot插槽和props

最新推荐文章于 2025-05-23 09:25:59 发布

原创最新推荐文章于 2025-05-23 09:25:59 发布 · 515 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

本文详细探讨了Vue.js中的slot插槽，包括具名插槽的概念和使用语法，如命名语法、使用语法及简写语法。同时，文章也介绍了props属性，阐述了props如何作为组件间传递数据的桥梁，需要在子组件中声明才能使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.slot-具名插槽

1.插槽（Slot）

插槽（Slot）是Vue提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性。slot就是可以让你在组件内添加内容的‘空间’，例如：

//子组件 ： (假设名为：ebutton)
<template>
  <div class= 'button'>
      <button>  </button>
  </div>
</template>

//父组件：（引用子组件 ebutton）
<template>
  <div class= 'app'>
     <ebutton> </ebutton>
  </div>
</template>

2.语法

1.命名语法：<slot name = '名字'>默认值</slot>

2.使用语法：(依赖template包裹,并且使用v-slot指定插槽的名字)

<template v-slot:插槽名>

要传递的内容

</template>

3.简写语法：(把v-slot变成#)

<template #插槽名>

要传递的内容

</template>

二.props声明

1.props 是组件的自定义属性，组件的使用者可以通过 props 把数据传递到子组件内部，供子组件内部进行使用父组件通过 props 向子组件传递数据，父组件通过 props 传递到子组件中的数据，必须在子组件的 “props”节点中进行声明。

使用props选项来定义:

一：使用字符串数组来声明

 export default {

        props:['name','age']

    }

二：使用对象的方式来声明

 export default {

        props:{

            key:value,

            (key是prop的名称，值是该prop预期类型的构造函数)

            name:Sting,

            age:Number.

        }

    }