vue.js踩坑之单向数据流

最新推荐文章于 2024-08-30 17:10:27 发布

草巾冒小子

最新推荐文章于 2024-08-30 17:10:27 发布

阅读量2k

点赞数 1

分类专栏： Vue.js vue.js踩坑篇文章标签： vue.js

本文为CSDN博主原创文章，不允许其他平台转载。擅自转载至其他平台，严肃追究！

本文链接：https://blog.csdn.net/qq_35393869/article/details/80664321

版权

Vue.js 同时被 2 个专栏收录

138 篇文章 10 订阅

订阅专栏

vue.js踩坑篇

46 篇文章 13 订阅

订阅专栏

vue.js父子组件之间的数据通信，细节总结

隐性规则：单行数据流

学前疑问：

1.父组件如何向子组件通信数据？
2.父组件可以直接修改子组件的数据！但是反过来绝对不可以！那怎么解决这个问题呢？
3.所谓的单向数据流，就是约束子直接改父，以避免上述情况的发生！
4.子组件如何向父组件通信数据？

要点简介：

1.父组件**都是通过属性*** 的方式向子组件传递数据*** 的！
2.父组件可以直接修改子组件的数据！反之，绝对不可以！
3.子组件都是通过事件触发的方式，向父组件通信数据的！
4.父子组件之间通信数据的隐性规定：就是“ 单向数据流 ”！

重要代码示下：

<body>
	
	<div id="app">
		<counter :count="4" @change="handleIncrease"></counter>
		<counter :count="6" @change="handleIncrease"></counter>
		<div>{{total}}</div>
	</div>
		
	<script>
		//定义子组件
		var counter = {
			props: ['count'],//接受父组件的什么内容？属性内容！
			data: function() {
				return {
					number: this.count
				}
			},
			template: '<button @click="handleClick">{{number}}</button>',
			methods: {
				handleClick: function() {
					this.number ++;
					this.$emit('change', 1); //自定义事件名称change，携带的参数为1
				}
			}
		}
		
		//父组件
		var app = new Vue({
			el: '#app',
			data: {
				total: 10
			},
			components: {
				counter: counter
			},
			methods: {
				handleIncrease: function(step) {
					this.total += step;
				}
			}
		})
	</script>
</body>