slot插槽和props

本文详细探讨了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.

        }

    }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值