vue 父组件与子组件之间互相传值

最新推荐文章于 2025-07-05 13:44:41 发布

原创最新推荐文章于 2025-07-05 13:44:41 发布 · 456 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

VUE 专栏收录该内容

29 篇文章

订阅专栏

本文通过示例介绍Vue中父子组件如何进行数据传递。父组件通过绑定属性向子组件传递值，子组件则通过props接收，并利用$emit触发父组件的自定义事件来回传数据，实现双向通信。

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

示例：
在这里插入图片描述
代码：
注册组件

// 注册组件
export default {
  components: {
 	//注册的组件名，例如为InputNumber
 	InputNumber
  }
}

父组件：

<template>
	<div>
		<InputNumber :num="num" @num-change="handleNumChange"></InputNumber>
	</div>
</template>
<script>
import InputNumber from "@/components/login/InputNumber.vue";
export default {
  components: { InputNumber },
  data() {
    return {
   	//父组件初始化num值
      num: 0,
    };
  },
  methods: {
  	handleNumChange(num){
  		this.num = num
  	}
  }
 </script>

子组件：

<template>
	<div>
		<button @click="handleIncrement(-1)">-</button>
		<input type=text :value="num"></input>
		<button @click="handleIncrement(1)">-</button>
	</div>
</template>
<script>
import InputNumber from "@/components/login/InputNumber.vue";
export default {
  props:['num'],
  data() {
    return {
    };
  },
  methods: {
  	handleIncrement(count){
  		this.$emit('num-change',this.num + count)
  	}
  }
 </script>

思路：（1）首先子组件进行注册，父组件引入子组件并引用

	<InputNumber :num="num" @num-change="handleNumChange"></InputNumber>

(2)以num值为例，父组件在引入的子组件后，绑定num来传值给子组件，handleNumChange()函数来改变值

<InputNumber :num="num" @num-change="handleNumChange"></InputNumber>

  	handleNumChange(num){
  		this.num = num
  	}

（3）而子组件中双向绑定了num值，使用props接受来自父组件的num值

props是单向的，只适合用于接受父组件的数据，子组件的值应该由父组件来影响

<input type=text :value="num"></input>

  props:['num'],

（4）接受到num值后，在子组件更改num值的方法中，使用this.$emit()将num传回给父组件

  	handleIncrement(count){
  		this.$emit('num-change',this.num + count)
  	}

$emit 触发父组件的自定义事件