子组件改变父组件的数据

最新推荐文章于 2024-05-22 16:09:12 发布

albert48

最新推荐文章于 2024-05-22 16:09:12 发布

阅读量463

点赞数

本文链接：https://blog.csdn.net/albert48/article/details/103402581

版权

Vue中有单向数据流的概念，子组件并不能修改父组件的数据。
因为如果父组件的数据被多个子组件使用，那么一个子组件改变了数据，会使其他子组件也收到影响。

<!DOCTYPE html>
<html>
<head>
	<title>change color</title>
	<script src="./vue.js"></script>
</head>
<body>

	<div id='app'>
		<counter :count=1></counter>
		<counter :count=2></counter>
	</div>

	<script>

		Vue.component('counter',{
			props:['count'],
			template:"<div @click='handleClick'>{{number}}</div>",
			methods:{
				handleClick(){
					this.number++;
				}
			},
			data(){
				return {
					number:this.count
				}
			}
		})

		var vm=new Vue({
			el:'#app',
			data:{

			}
		})

	</script>


</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

albert48

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
子组件改变父组件的数据

Vue中有单向数据流的概念，子组件并不能修改父组件的数据。因为如果父组件的数据被多个子组件使用，那么一个子组件改变了数据，会使其他子组件也收到影响。<!DOCTYPE html><html><head> <title>change color</title> <script src="./vue.js"></...
复制链接

扫一扫