vue.js踩坑之单向数据流

vue.js父子组件之间的数据通信，细节总结隐性规则：单行数据流学前疑问：1.父组件如何向子组件通信数据？2.父组件可以直接修改子组件的数据！但是反过来绝对不可以！那怎么解决这个问题呢？3.所谓的单向数据流，就是约束子直接改父，以避免上述情况的发生！4.子组件如何向父组件通信数据？要点简介：1.父组件都是通过...

草巾冒小子

2048人浏览 · 2018-06-14 09:38:23

草巾冒小子 · 2018-06-14 09:38:23 发布

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>

注意上述代码，记住几点：

父组件：都是通过属性的方式向子组件传递数据的！
子组件：定义属性number复制父组件数据，再通过事件触发的方式，完成向父组件通信数据。
:counte="0"，表示传递 数字0
:counte="0"，表示传递 字符串0

以上就是关于 “ vue.js踩坑之单向数据流 ” 的全部内容。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^