vue2父向子传值props ，子向父用自定义事件$emit

最新推荐文章于 2025-07-14 10:30:31 发布

学魔学编程

最新推荐文章于 2025-07-14 10:30:31 发布

阅读量366

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_59717525/article/details/121252289

该示例展示了Vue.js中父子组件之间的数据通信。父组件通过props将`message`和`userInfo`传递给子组件，并监听`handleChangeNum`事件来更新自身的`count`值。子组件则接收props并修改其内部`count`，通过触发`handleChangeNum`事件将改变的值传回父组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

示例代码

父组件代码

<template>
  <div class="hello">
    <h1>{
  
  { msg }}</h1>
    <son :message="message" :userInfo="userInfo" @handleChangeNum="getChangeNum"></son>
    <h3>父组件显示 {
  
  {count }} </h3>

  
  </div>
</template>

<script>
import son from '@/components/son.vue';
export default {
  name: 'HelloWorld',
  components:{
    son:son
  },
  props: {
    msg: String
  },
  data(){
    return {
      message:"hello vue.js",