Vue组件入门(二)props和emit

138 阅读1分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第2天,点击查看活动详情

前言

有些情况下,我们可能对组件内部内容的需求不是固定的,这个时候我们就需要通过向组件传递内容数据来解决这个问题。而要实现这样的效果,就可以通过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> 中使用。