Vue 组件入门（二）props 和 emit

作者：Augus

2022 年 10 月 11 日
天津
本文字数：824 字
阅读完需：约 3 分钟

前言

有些情况下，我们可能对组件内部内容的需求不是固定的，这个时候我们就需要通过向组件传递内容数据来解决这个问题。而要实现这样的效果，就可以通过props属性来实现。

props

通过defineProps在组件内部声明注册，defineProps并不需要显示导入。而声明的 props 也会自动暴露给模板，在模板中可以直接使用。

<script setup>defineProps(['content'])</script>
<template>  <span>{{ content }}</span></template>

复制代码

注意：defineProps 只能在 <script setup> 中使用。

defineProps 会返回一个对象，其中包含了该组件声明的所有 props：

const props = defineProps(['content'])console.log(props.content)

复制代码

当 props 被注册声明后，在父组件使用的时候，需要通过自定义属性的形式进行数据的传递。

<contentCom content="今天是星期一" /><contentCom content="晴转多云" /><contentCom content="阳光明媚" />

复制代码

emit

有些时候我们可能与父组件进行交互。比如说，组件内部有一个按钮，通过点击该按钮可以动态增大字体大小。那首先要做的就是，在父组件中，声明一个 ref 来动态控制字体大小：

const fontSize = ref(1)

复制代码

在模板中使用他来控制字体大小：

<div :style="{ fontSize: fontSize + 'em' }">  <contentCom/></div>

复制代码

而要实现我们上述所说的功能，通过子组件来控制字体大小的话，还需要通过自定义事件的方式来实现。也就是说，需要在子组件中抛出一个事件，然后在父组件中进行监听，来实现操作。

首先通过@在父组件进行监听：

<div :style="{ fontSize: fontSize + 'em' }">  <contentCom @change-fontSize= fontSize += 1 /></div>

复制代码

在子组件中通过内置的$emit方法，进行事件的抛出：

<!-- contentCom.vue --><template>  <div>    <span>{{ content }}</span>    <button @click="$emit('change-fontSize')">改变字体</button>  </div></template><script setup>defineEmits(['change-fontSize'])</script>

复制代码

注意：defineEmits 只能在 <script setup> 中使用。

发布于: 刚刚阅读数: 5

Augus

关注

爱瞎搞的软件开发工程师 2021.06.10 加入

某摸鱼集团

发布

暂无评论

创作场景

Vue 组件入门（二）props 和 emit

前言

props

emit

Augus

评论