一.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.
}
}