父子元件的資料傳遞

依米_發表於2018-05-16
元件
<counter :count="0"></counter>

<counter :count="1"></counter>加冒號0是數字，不加冒號0是字元

父元件向子元件傳值

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>父子元件傳值</title>
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>
<div id="root">
<!--父元件通過counter這個子元件，傳遞了一個count的資料-->
<counter :count="1"></counter><!--//父元件向子元件傳值都是通過屬性傳遞的-->
<counter :count="2"></counter>
</div>
<script>


var counter = {
props:['count'],
//子元件需要接收來自父元件的內容，來接收count這個屬性內容//子元件接收資料
template:'<div>{{count}}</div>'
}
var vm =new Vue({
el:'#root',
components:{
counter:counter
}
})
</script>
</body>

</html>


var counter = {
props:['count'],
//子元件需要接收來自父元件的內容，來接收count這個屬性內容//子元件接收資料
template:'<div @click="handleClick">{{count}}</div>',
methods:{
handleClick:function  () {
this.count ++   //子元件不能直接修改父元件傳遞的內容
}
}

}

報錯  //子元件不能直接修改父元件傳遞的內容


如何解決呢，就是吧父元件的東西轉化給子元件的就行

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>父子元件傳值</title>
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>
<div id="root">
<!--父元件通過counter這個子元件，傳遞了一個count的資料-->
<counter :count="1"></counter><!--//父元件向子元件傳值都是通過屬性傳遞的-->
<counter :count="2"></counter>
</div>
<script>


var counter = {
props:['count'],
data:function(){
return {
number:this.count
}
},
//子元件需要接收來自父元件的內容，來接收count這個屬性內容//子元件接收資料
template:'<div @click="handleClick">{{number}}</div>',
methods:{
handleClick:function  () {
this.number =number+2；  //子元件不能直接修改父元件傳遞的內容，單項資料流
}
}

}
var vm =new Vue({
el:'#root',
components:{
counter:counter
}
})
</script>
</body>

</html>

子元件向父元件傳值

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>父子元件傳值</title>
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>
<div id="root">

<counter :count="1" @inc="handleIncrease"></counter><!--2.-->
<counter :count="2" @inc="handleIncrease"></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 =this.number+2;  //子元件不能直接修改父元件傳遞的內容，要新增一個副本，來利用副本
this.$emit('inc',2);//當增加的是2時，要宣告
// 1.
}
}

}
var vm =new Vue({
el:'#root',
components:{
counter:counter
},
data:{
total :3
},
methods:{
handleIncrease:function  (step) {
this.total = this.total +step
}
}
})
</script>
</body>
</html>



相關文章