前言：如何实现组件的灵活使用，今天学习组件封装用到的props、slot和emit。
目录
props
子组件
父组件
示例代码
slot
示例代码
作用域插槽
emit
示例代码
props
需要实现在其他组件中使用同一个子组件。
子组件
子组件（所谓子组件，就是封装好的组件，供其他组件使用）
子组件定义了sonName
<div>我是MRJJ_9{{sonName}}</div>
defineProps(['sonName'])
或 const props=defineProps(['sonName'])
props是只读的，尽量不要去修改
定义多个
const props=defineProps(['sonName1','sonName2'])
但通常使用数组定义
const props = defineProps({
sonName1: Object,
sonName: Number,})
父组件
父组件（所谓父组件，就是引用封装好的其他子组件）
<Mrjj-Counter :sonName="sonName"></Mrjj-Counter>
let sonName=ref("引用子组件")
示例代码
子组件设置
<template>
<div>我是MRJJ_9的第一个属性，类型为字符串，内容是：{{ sonName1 }},第二个属性，类型是数字，数值为：{{ sonName2 }}</div>
</template>
<script setup>
const props = defineProps({
sonName1: String,
sonName2: Number,
})
console.log("属性1",props.sonName1)
console.log("属性2",props.sonName2)
</script>
<style lang="scss" scoped>
</style>父组件设置
<template>
<mrjj-son :sonName1="sonName1" :sonName2="sonName2"></mrjj-son>
</template>
<script setup>
import MrjjSon from '@/components/MrjjSon.vue'
import { ref } from 'vue'
let sonName1 = ref('hello,world!!!')
let sonName2 = ref(999)
</script>
<style lang="scss" scoped>
</style> 
要注意不能去修改里面的值
slot
需要实现在其他组件中使用同一个组件（子组件），但组件样式的有所区别
这就需要用到插槽：slot，其作用是传参时可以带上HTML结构
子组件带上slot
{{ sonName }}<slot></slot>
父组件将需要传递的内容写到子组件标签里
<mrjj-son><strong>{{sonName }}</strong></mrjj-son>
具名插槽，给插槽命名
有多个值时
子组件加上name
父组件，用v-slot:插槽名（或#插槽名）
示例代码
子组件设置
<template>
<div>
{{ sonName1 }}
<slot name="mrjj1"></slot>
{{ sonName2 }}
<slot name="mrjj2"></slot>
</div>
</template>
<script setup>
const props = defineProps({
sonName1: String,
sonName2: Number
})
</script>
<style lang="scss" scoped>
</style>父组件设置
<template>
<mrjj-son>
<template #mrjj1
><strong>{{ sonName1 }}</strong></template
>
<template #mrjj2
><i>{{ sonName2 }}</i></template
>
</mrjj-son>
</template>
<script setup>
import MrjjSon from '@/components/MrjjSon.vue'
import { ref } from 'vue'
let sonName1 = ref('hello,world!!!')
let sonName2 = ref(999)
</script>
<style lang="scss" scoped>
</style>效果展示
作用域插槽
子组件
<template>
<div>
{{ sonName3 }}
<slot name="mrjj3" :times="count" :mrjj1="name"></slot>
</div>
</template>
<script setup>
import { ref } from 'vue'
const props = defineProps({
sonName3: String
})
let count = ref(0)
let name = ref('计数器')
</script>
<style lang="scss" scoped>
</style>父组件
<template #mrjj3="{ times }"
<template>
<mrjj-son>
<template #mrjj3="{ times }"
><i>{{ sonName3 }}</i>
<Times :times="times"></Times>
</template>
</mrjj-son>
</template>
<script setup>
import MrjjSon from '@/components/MrjjSon.vue'
import Times from '@/components/Times.vue'
import { ref } from 'vue'
let sonName3 = ref('')
</script>
<style lang="scss" scoped>
</style>引用的Time.vue文件
<template>
<h1>显示Mrjj{{ times }}</h1>
</template>
<script setup>
defineProps(['times'])
</script>
emit
需求：增加一个关闭、打开的组件功能
用到emit，emit干了什么事情呢？在子组件中触发一个事件，在父组件中进行监听。
示例代码
子组件定义一个自定义事件
<template>
<div>
{{ sonName1 }}
<slot name="mrjj1"></slot>
{{ sonName2 }}
<slot name="mrjj2"></slot>
<button @click="closeSon">点我关闭</button>
</div>
</template>
<script setup>
const props = defineProps({
sonName1: String,
sonName2: Number
})
const emit = defineEmits(['closeMrjj'])
function closeSon() {
console.log('关闭按钮被点击了！')
emit('closeMrjj')
}
</script>
<style lang="scss" scoped>
</style>父组件绑定事件
<template>
<mrjj-son @closeMrjj="closeMrjj" v-if="isClose">
<template #mrjj1
><strong>{{ sonName1 }}</strong></template
>
<template #mrjj2
><i>{{ sonName2 }}</i></template
>
</mrjj-son>
<button v-else @click="($event) => (isClose = true)">点我打开</button>
</template>
<script setup>
import MrjjSon from '@/components/MrjjSon.vue'
import { ref } from 'vue'
let sonName1 = ref('hello,world!!!')
let sonName2 = ref(999)
let isClose = ref(false)
function closeMrjj() {
isClose.value = false
}
</script>
<style lang="scss" scoped>
</style>效果展示
点我关闭按钮，点击后，调用了closeSon函数，可以看到console输出的信息。
点击展开后，也可以展示出内容。文章来源：https://www.toymoban.com/news/detail-680271.html
文章来源地址https://www.toymoban.com/news/detail-680271.html
到了这里，关于前端基础（props emit slot 父子组件间通信）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
