Vue.js之父子傳值
阿新 • • 發佈：2018-11-13
官網連結：https://cn.vuejs.org/v2/guide/components-props.html
視訊連結：
參考文章連結：http://www.cnblogs.com/keepfool/p/5625583.html
如下程式碼所示：
父元件向子元件傳值
程式碼如下所示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="stylesheet" href=""> <script src="vue.min.js"></script> <body> <div id="app"> <counter v-bind:count="number"></counter> </div> <script> var counter={ props:['count'], template:`<div>{{count}}</div>` } var vm=new Vue({ el:'#app', components:{ // counter可以寫成counter:counter counter }, data:{ number:0 } }) </script> </body> </body> </html>
子元件只能夠用父元件傳遞過來的值，而不能去修改父元件傳遞過來的值。因為父元件的值可能被多個子元件使用，如果某個子元件修改父元件的值，那麼它也會對其它元件的值造成影響。程式碼如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="stylesheet" href=""> <script src="vue.min.js"></script> <body> <div id="app"> <counter v-bind:count="number"></counter> </div> <script> var counter={ props:['count'], template:`<div @click="add">{{count}}</div>`, methods:{ add:function(){ this.count++; } } } var vm=new Vue({ el:'#app', components:{ // counter可以寫成counter:counter counter }, data:{ number:0 } }) </script> </body> </body> </html>
針對這個問題，我們可以在子元件中定義一個data來儲存父元件傳遞過來的值。讓其資料能夠成為一個獨立的部分來供子元件單獨使用。正確程式碼如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="stylesheet" href=""> <script src="vue.min.js"></script> <body> <div id="app"> <counter v-bind:count="number"></counter> </div> <script> var counter={ props:['count'], data:function(){ return{ number:this.count } }, template:`<div @click="add">{{number}}</div>`, methods:{ add:function(){ this.number++; } } } var vm=new Vue({ el:'#app', components:{ // counter可以寫成counter:counter counter }, data:{ number:0 } }) </script> </body> </body> </html>
子元件向父元件傳值
子元件通過$emit來將值傳遞給父元件，但是前提是一定要有事件觸發。如下程式碼所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<script src="vue.min.js"></script>
<body>
<div id="app">
<counter v-bind:count="number" @increase="addc"></counter>
<counter v-bind:count="number" @increase="addc"></counter>
<div>{{total}}</div>
</div>
<script>
var counter={
props:['count'],
data:function(){
return {
number:this.count
}
},
template:`<div @click="add">{{number}}</div>`,
methods:{
add:function(){
this.number++;
this.$emit('increase',1);
}
}
}
var vm=new Vue({
el:'#app',
components:{
// counter可以寫成counter:counter
counter
},
data:{
number:1,
total:2
},
methods:{
addc:function(value){
this.total+=value;
}
}
})
</script>
</body>
</body>
</html>