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

前言：如何实现组件的灵活使用，今天学习组件封装用到的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输出的信息。

点击展开后，也可以展示出内容。