前端基础(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("引用子组件")

示例代码

子组件设置

javascript 复制代码
<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>

父组件设置

javascript 复制代码
<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:插槽名(或#插槽名)

示例代码

子组件设置

javascript 复制代码
<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>

父组件设置

javascript 复制代码
<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>

效果展示

作用域插槽

子组件

javascript 复制代码
<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 }"

javascript 复制代码
<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文件

javascript 复制代码
<template>
  <h1>显示Mrjj{{ times }}</h1>
</template>
<script setup>
defineProps(['times'])
</script>

emit

需求:增加一个关闭、打开的组件功能

用到emit,emit干了什么事情呢?在子组件中触发一个事件,在父组件中进行监听。

示例代码

子组件定义一个自定义事件

javascript 复制代码
<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>

父组件绑定事件

javascript 复制代码
<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输出的信息。

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

相关推荐
袁煦丞1 天前
MoneyPrinterTurbo一键生成短视频:cpolar内网穿透实验室第644个成功挑战
前端·程序员·远程工作
代码小学僧1 天前
让 AI 真正帮你开发:前端 MCP 实用技巧分享
前端
晴殇i1 天前
前端鉴权新时代:告别 localStorage,拥抱更安全的 JWT 存储方案
前端·javascript·面试
Json____1 天前
使用node Express 框架框架开发一个前后端分离的二手交易平台项目。
java·前端·express
since �1 天前
前端转Java,从0到1学习教程
java·前端·学习
深思慎考1 天前
RabbitMQ 入门:基于 AMQP-CPP 的 C++ 实践指南与二次封装
开发语言·c++·分布式·rabbitmq·api
catchadmin1 天前
PHP8.5 的新 URI 扩展
开发语言·后端·php
小奋斗1 天前
面试官:[1] == '1'和[1] == 1结果是什么?
前端·面试
萌萌哒草头将军1 天前
尤雨溪宣布 oxfmt 即将发布!比 Prettier 快45倍 🚀🚀🚀
前端·webpack·vite
weixin_405023371 天前
webpack 学习
前端·学习·webpack