vuejs父子組件的數據傳遞

在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;
　　　　}
　　}
})