浅谈Vue3——父子组件传值
前端使用到vue3 + typeScript,最近使用到vue3 的父子组件之间的传值,顺便学习一下,在此总结一下,若有不足之处,望大佬们可以指出。
vue3官网: https://cn.vuejs.org/ link
引言
Vue.js是一款流行的JavaScript框架,用于构建用户界面。它提供了一种简洁、灵活的方式来管理和渲染数据。在Vue3中,父子组件之间的数据传递是一个常见的需求。本文将介绍如何在Vue3中传递对象,并且在子组件中访问和修改父组件对象中的属性值。
父子组件传值的作用
在 Vue 3 中,父子组件之间传值有以下作用:
-
组件通信:父组件可以通过向子组件传递数据来实现与子组件的通信。这样,父组件就能将数据传递给子组件,并且子组件可以根据接收到的数据进行渲染或执行相应的操作。
-
数据共享:通过父子组件传值,可以在多个组件之间共享数据。当多个子组件需要访问同一个数据时,可以将数据定义在父组件中,然后通过 props 将数据传递给子组件,从而实现数据共享。
-
动态配置:父组件可以通过向子组件传递不同的参数或配置,来动态控制子组件的行为。例如,父组件可以根据用户的操作或业务需求,向子组件传递不同的 props 值,以便子组件根据不同的配置进行展示或处理。
-
构建组件库:通过父子组件传值,可以构建可复用的组件库。父组件可以定义一些可配置的选项或属性,并将它们作为 props 传递给子组件。这样,其他开发者在使用该组件库时,可以根据自己的需求和场景,通过修改 props 值来自定义组件的行为和外观。
总之,父子组件之间传值在 Vue 3 中十分重要,它实现了组件之间的通信、数据共享和动态配置等功能,为构建灵活、可复用的组件提供了便利。
一、父向子组件传值
父组件传递参数
<template>
<!-- 父页面 -->
<main>
<el-button type="primary" @click="change">父组件点击</el-button>
<div class="line"></div>
<child :msg="msg" />
</main>
</template>
<script setup lang="ts">
import child from './child.vue';
import { ref } from 'vue';
const msg = ref('父组件msg')
const change = () => {
msg.value = '父值66666'
}
</script>
<style lang="scss">
.line {
border: 1px dashed #ccc;
width: 500px;
height: 1px;
margin: 30px 0;
}
</style>
子组件接受参数值
defineEmits: defineEmits() 宏仅限于 setup 语法糖 使用,用来声明组件要触发的事件。
<template>
<!-- 子组件 -->
<div class="about">
<h1>子组件接收父组件值:{{ msg }}</h1>
<el-button type="primary" @click="childChange">子组件点击</el-button>
</div>
</template>
<script setup lang="ts">
defineProps({
msg: {
type: String,
default: ''
}
})
</script>
二、子向父组件传值
子组件传递参数
<template>
<!-- 子组件 -->
<div class="about">
<h1>子组件接收父组件值:{{ msg }}</h1>
<el-button type="primary" @click="childChange">子组件点击</el-button>
</div>
</template>
<script setup lang="ts">
defineProps({
msg: {
type: String,
default: ''
}
})
// 声明组件要触发的事件
const emits = defineEmits(['increase']);
//子组件传值父组件
const childChange = () => {
//声明不能直接更改父组件传过来的值 msg
emits('increase', '子组件值8888')
}
</script>
父组件接收参数值
<template>
<!-- 父页面 -->
<main>
<el-button type="primary" @click="change">父组件点击</el-button>
<div class="line"></div>
<child :msg="msg" @increase="childHandle" />
</main>
</template>
<script setup lang="ts">
import child from './child.vue';
import { ref } from 'vue';
const msg = ref('父组件msg')
//父组件点击
const change = () => {
msg.value = '父值66666'
}
//接收子组件传过来的值
const childHandle = (val: string) => {
msg.value = val
}
</script>