筆記(三) Vue父子組件傳值
阿新 • • 發佈：2019-01-31
one pan 怎麽 事件 scrip round methods click back
父組件向子組件傳遞數據
Vue中的父組件要想向子組件傳遞值的化需要通過屬性的方式傳遞
<body> <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> </body>
就像這樣 在父組件上綁定一個count屬性,子組件通過props來接收count屬性所傳遞的值,然後通過插值表達式插入到子組件內
當我們想操作傳遞過來的數據的時候,我們就要註意了父組件傳遞給子組件數據時,因為單向數據流的關系,子組件是不能直接修改傳遞的數據的那我們要怎麽辦呢?
var counter={ props:["count"], data:function(){ return { number : this.count } }, template:"<div @click=‘handleClick‘>{{number}}</div>", methods:{ handleClick:function(){ this.number++ } } }
我們可以在子組件定義一個number來接這個count,我們直接去操作這個number就可以不影響父組件了
子組件向父組件傳遞數據
子組件向父組件傳遞數據是通過事件的方式,父組件通過監聽這個事件,就可以獲取數據了
handleClick:function(){ this.number++ this.$emit("change",1) }
我們通過$emit 向外觸發一個事件,而且這個事件後面可以攜帶一個或者多個參數
然後我們在父組件綁定一個事件 ,這個事件名就是$emit向外觸發的事件.
<div id="root"> <counter :count="0" @change="handleChange"></counter> <counter :count="0" @change="handleChange"></counter> <div>{{total}}</div> </div>
然後我們去根組件裏面綁定這個事件
handleChange:function(e){ this.total+=e }
這個e就是前面change事件攜帶的參數,我們就完成了子組件向父組件傳遞數據
筆記(三) Vue父子組件傳值