vuejs父子组件的数据传递

Posted 2021-01-06 Zina

在vue中，父组件往子组件传递参数都是通过属性的形式来传递的

<div id=‘root‘>
　　<counter :count = ‘1‘></counter>
　　<counter :count = ‘2‘></counter>
</div>

<script>
var counter = {
　　props:[‘count‘],
　　　　template:‘<div>{{count}}</div>‘
　　}
　　var vm = new Vue({
　　　　el:‘#root‘,
　　　　components:{
　　　　　　counter: counter
　　　　}
})
</script>

 

 

需求，在子组件被点击的时候＋1，我们可能会这么写

var counter = {
　　props:[‘count‘],
　　template:‘<div @click="handleClick">{{count}}</div>‘,
　　methods:{
　　　　handleClick:function(){
　　　　　　this.count ++
　　　　}
　　}
}

这个时候页面上看上去是正常的，但是控制台会报错，为什么呢？

在vue中有个单向数据流的概念，也就是父组件可以向子组件传递参数，通过属性传，传递的参数可以随便的进行修改，但是反过来，子组件绝对不能去修改父组件传递过来的参数，只能用这个内容，但是不能修改这个内容

之所以vue中有这个单向数据流的概念，原因在于，一旦子组件这个接收的数据并不是基础类型的数据，而是一个引用数据的时候，在子组件改变了数据，又可能接收的这个内容还被其他的组件所使用，这样不仅仅改了自身的数据，还会对其他对组件造成影响，所以vue中有个单向数据流，子组件不能改变父组件传递过来对数据

 

那么，这里确实要改变这个count的值，现在不让我改，那要怎么实现这个功能呢？

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

这样实现，将父组件传递过来的参数赋值给子组件的number，再使用子组件自己的数据的时候，是可以进行更改的，而且也不会影响到父组件的数据

子组件如何向父组件传递参数

通过事件触发的方式，$emit

<div id=‘root‘>
　　<counter :count = ‘3‘ @change = ‘handleChange‘></counter>
　　<counter :count = ‘2‘ @change = ‘handleChange‘></counter>
　　<div>{{total}}</div>
</div>


<script>
var counter = {
　　props:[‘count‘],
　　data:function(){
　　　　return {
　　　　　　number:this.count
　　　　}
　　},
　　template:‘<div @click="handleClick">{{number}}</div>‘,
　　methods:{
　　　　handleClick:function(){
　　　　　　this.number += 2;
　　　　　　this.$emit(‘change‘,2);
　　　　}
　　}
}
var vm = new Vue({
　　el:‘#root‘,
　　data:{
　　　　total:5
　　},
　　components:{
　　　　counter: counter
　　},
　　methods:{
　　　　handleChange:function(step){
　　　　　　this.total += step;
　　　　}
　　}
})