Vue 父子组件的数据传递（二）
2020-10-10 本文已影响0人
云凡的云凡
1.单向数据流的概念：父组件可以通过属性的显示向子组件传递参数，传递过的参数可以随意的修改（也就是父组件可以向子组件随意的传递参数），子组件却不能反过来去修改父组件传过来的参数。
之所以Vue有单向数据流的概念，是因为如果父组件传递过来的是引用类型的数据，而不是基本类型的数据，当在子组件改变了传递过来的内容，也可能接收的这个引用类型的数据还被其他的组件所使用，这样的话，子组件改了这个数据，不仅仅影响了这一个组件，很有可能对其他子组件造成影响。
所以，子组件不能改变父组件的数据
完整代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>12 父子组件的数据传递</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<counter :num='11' @add='handleAdd'></counter>
<counter :num='12' @add='handleAdd'></counter>
<div>{{total}}</div>
</div>
<script>
var counter = {
props: ['num'],
data: function () {
return {
// 从父组件接收到了num这个数据，把num数据复制一份到子组件自己的data里面，就可以用子组件自己的numChange
numChange: this.num
}
},
template: '<div @click="handleClick">{{numChange}}</div>', //用子组件自己的numChange
methods: {
handleClick: function () {
//this.num ++ // 能够加 但是会[Vue warn]，因为改了父组件传过来的内容
this.numChange = this.numChange + 2
this.$emit('add', 2)
}
},
}
var vm = new Vue({
el: "#app",
data: {
total: 23
},
methods: {
handleAdd(step) {
this.total += step
}
},
components: {
counter,
}
})
</script>
</body>
</html>
