前端基础（props emit slot 父子组件间通信）

前言：如何实现组件的灵活使用，今天学习组件封装用到的props、slot和emit。

目录

props

子组件

父组件

示例代码

slot

示例代码

作用域插槽

emit

示例代码

---

props

需要实现在其他组件中使用同一个子组件。

子组件

子组件（所谓子组件，就是封装好的组件，供其他组件使用）

子组件定义了sonName

我是MRJJ_9{{sonName}}

defineProps(['sonName'])

或 const props=defineProps(['sonName'])

props是只读的，尽量不要去修改

定义多个

const props=defineProps(['sonName1','sonName2'])

但通常使用数组定义

const props = defineProps({
  sonName1: Object,
  sonName: Number,})

父组件

父组件（所谓父组件，就是引用封装好的其他子组件）

:sonName="sonName">

let sonName=ref("引用子组件")

示例代码

子组件设置

父组件设置

 

要注意不能去修改里面的值

slot

需要实现在其他组件中使用同一个组件（子组件），但组件样式的有所区别

这就需要用到插槽：slot，其作用是传参时可以带上HTML结构

子组件带上slot

{{ sonName }}

父组件将需要传递的内容写到子组件标签里

{{sonName }}

具名插槽，给插槽命名

有多个值时

子组件加上name

父组件，用v-slot:插槽名（或#插槽名）

示例代码

子组件设置

父组件设置

效果展示

作用域插槽

子组件

父组件