前言：如何實(shí)現(xiàn)組件的靈活使用，今天學(xué)習(xí)組件封裝用到的props、slot和emit。
目錄
props
子組件
父組件
示例代碼
slot
示例代碼
作用域插槽
emit
示例代碼
props
需要實(shí)現(xiàn)在其他組件中使用同一個子組件。
子組件
子組件（所謂子組件，就是封裝好的組件，供其他組件使用）
子組件定義了sonName
<div>我是MRJJ_9{{sonName}}</div>
defineProps(['sonName'])
或 const props=defineProps(['sonName'])
props是只讀的，盡量不要去修改
定義多個
const props=defineProps(['sonName1','sonName2'])
但通常使用數(shù)組定義
const props = defineProps({
? sonName1: Object,
? sonName: Number,})
父組件
父組件（所謂父組件，就是引用封裝好的其他子組件）
<Mrjj-Counter :sonName="sonName"></Mrjj-Counter>
let sonName=ref("引用子組件")
示例代碼
子組件設(shè)置
<template>
<div>我是MRJJ_9的第一個屬性，類型為字符串，內(nèi)容是：{{ sonName1 }},第二個屬性，類型是數(shù)字，數(shù)值為：{{ 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>父組件設(shè)置
<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
需要實(shí)現(xiàn)在其他組件中使用同一個組件（子組件），但組件樣式的有所區(qū)別
這就需要用到插槽：slot，其作用是傳參時可以帶上HTML結(jié)構(gòu)
子組件帶上slot
{{ sonName }}<slot></slot>
父組件將需要傳遞的內(nèi)容寫到子組件標(biāo)簽里
<mrjj-son><strong>{{sonName }}</strong></mrjj-son>
具名插槽，給插槽命名
有多個值時
子組件加上name
父組件，用v-slot:插槽名（或#插槽名）
示例代碼
子組件設(shè)置
<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>父組件設(shè)置
<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('計(jì)數(shù)器')
</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
需求：增加一個關(guān)閉、打開的組件功能
用到emit，emit干了什么事情呢？在子組件中觸發(fā)一個事件，在父組件中進(jìn)行監(jiān)聽。
示例代碼
子組件定義一個自定義事件
<template>
<div>
{{ sonName1 }}
<slot name="mrjj1"></slot>
{{ sonName2 }}
<slot name="mrjj2"></slot>
<button @click="closeSon">點(diǎn)我關(guān)閉</button>
</div>
</template>
<script setup>
const props = defineProps({
sonName1: String,
sonName2: Number
})
const emit = defineEmits(['closeMrjj'])
function closeSon() {
console.log('關(guān)閉按鈕被點(diǎn)擊了！')
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)">點(diǎn)我打開</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>效果展示
點(diǎn)我關(guān)閉按鈕，點(diǎn)擊后，調(diào)用了closeSon函數(shù)，可以看到console輸出的信息。
點(diǎn)擊展開后，也可以展示出內(nèi)容。文章來源：http://www.zghlxwxcb.cn/news/detail-680271.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-680271.html
到了這里，關(guān)于前端基礎(chǔ)（props emit slot 父子組件間通信）的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
