记录下vue3父子组件中传参

小小的杰茜

已于 2023-02-20 14:54:15 修改

阅读量664

点赞数

分类专栏：前端开发 vue3.0 文章标签： vue.js 前端

于 2022-03-03 16:33:53 首次发布

本文链接：https://blog.csdn.net/m0_53584457/article/details/123255432

版权

前端开发同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

11 篇文章 0 订阅

订阅专栏

本文介绍了Vue.js中父组件向子组件传递参数的方法，通过`props`实现数据下行，并展示了如何在子组件中使用`props`接收到的数据。同时，详细阐述了子组件如何通过自定义事件改变父组件的参数值，利用`emit`触发事件并传递新的值给父组件。通过这两个关键机制，深入理解Vue.js组件间的通信原理。

摘要由CSDN通过智能技术生成

一：父组件向子组件传参

在父组件中：

<template>
    我是父组件
    <son :para="para"/>
</template>

<script setup lang="ts">
import { ref } from "vue"

const para = ref<string>("我是子组件")
</script>

在子组件中：

<template>
    我是子组件
    <p>{{para}}</p>
    为了不冲突，也可以这样使用
    <p>{{props.para}}</p>
</template>

<script setup lang="ts">
const props = defineProps<{
  para:string
}>()
</script>

二：自定义事件; 可以从子组件中改变父组件的参数值

<template>
    我是父组件
    <son :para="para" @start="goToSon"/>
</template>

<script setup lang="ts">
import { ref } from "vue"

const para = ref<string>("我是子组件")

const goToSon = (newValue:string)=>{
    para.value = newValue:string
}
</script>

在子组件中：

<template>
    我是子组件
    <button @click="son"></button>
</template>

<script setup lang="ts">
const props = defineProps<{
  para:string
}>()

const emits = defineEmits(["start"])

const son = ()=>{
  emits("start", "我会改变父组件中的参数")
}
</script>