文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

七个 Vue 3 中的组件通信方式

2024-12-02 01:58

关注

写在前面

我们会讲以下七种组件通信方式:

举个例子

本文将使用如下演示,如下图所示:

上图中,列表和输入框分别是父组件和子组件。根据不同的通信方式,会调整父子组件。

1、Props

props 是 Vue 中最常见的父子通信方式,使用起来也比较简单。

根据上面的demo,我们在父组件中定义了数据和对数据的操作,子组件只渲染一个列表。

父组件代码如下:

<template>

<child-components :list="list"></child-components>

<div class="child-wrap input-group">
<input
v-model="value"
type="text"
class="form-control"
placeholder="Please enter"
/>
<div class="input-group-append">
<button @click="handleAdd" class="btn btn-primary" type="button">
add
</button>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
import ChildComponents from './child.vue'
const list = ref(['JavaScript', 'HTML', 'CSS'])
const value = ref('')
// event handling function triggered by add
const handleAdd = () => {
list.value.push(value.value)
value.value = ''
}
</script>

子组件只需要渲染父组件传递的值。

代码如下:

<template>
<ul class="parent list-group">
<li class="list-group-item" v-for="i in props.list" :key="i">{{ i }}</li>
</ul>
</template>
<script setup>
import { defineProps } from 'vue'
const props = defineProps({
list: {
type: Array,
default: () => [],
},
})
</script>

2、Emit