vue父子组件通信的问题记录

最新推荐文章于 2024-05-31 11:32:16 发布

出现又离开yx

最新推荐文章于 2024-05-31 11:32:16 发布

阅读量115

点赞数 1

文章标签： vue vue.js

本文链接：https://blog.csdn.net/weixin_42008670/article/details/112335642

版权

这篇博客记录了作者在CSDN的第一天，主要探讨了Vue中父子组件通信的问题。作者在尝试子组件修改并传递数据给父组件时遇到了问题，发现直接操作props中的值会导致无法响应变化。解决方案是将父组件传递的数据保存到子组件的data中，通过data实现双向绑定，从而正确实现子组件对父组件值的修改并传递。

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

CSDN第一天

前言

在2021年初，前端小白做了一直想做的事，就是使用CSDN来记录我的学习过程，包括出现的问题，如何解决。第一方面是用这种方式可以加深练习的记忆，加固知识；第二方面是希望在别的同学遇到相同的问题时，可以还互相讨论，精益求精。

关于vue组件化子组件与父组件通信的问题

一、代码

全文代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<!-- 使用组件 -->
			<!-- 3、父组件监听子组件传递的发射函数 -->
			<counter :child-Counter = 'counterNum' @increment="increment" @decrement="decrement"></counter>
		</div>
		
		<!-- 子组件的模板 -->
		<template id="counter" >
			<div>
				<h2>当前计数：{
   {
   childCounter}}</h2>
				<!-- 1、在子组件向父组件通信的模板地方，绑定事件-->
				<button type="button"  @click="addBtn">+</button>
				<button type="button"  @click