Vue 元件 父子元件間的資料傳遞
阿新 • • 發佈:2018-11-05
首先定義一個元件(區域性元件)
<div id="root"> <counter></counter> <counter></counter> </div> <script> // 區域性元件 var counter = { template: "<div>0</div>" } var vm = new Vue({ el: "#root", components: { counter: counter } }) </script>
父元件向子元件傳遞資料 —— 通過屬性
下面,父元件通過count 屬性向子元件中傳遞了一個數字,同時子元件接收該屬性
<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>
Vue 中有“單向資料流”概念。父元件可以向子元件中通過屬性方式傳遞資料並修改資料,但子元件不可以修改該資料。
那麼如何獲得父元件的資料並修改呢?
將父元件的值賦值給子元件的data中的資料即可,如下。
<div id="root"> <counter :count="1"></counter> <counter :count="2"></counter> </div> <script> // 區域性元件 var counter = { props: ["count"], template: "<div @click='handleClick'>{{number}}</div>", data: function(){ return { number: this.count } }, methods: { handleClick: function(){ this.number ++ ; } } } var vm = new Vue({ el: "#root", components: { counter: counter } }) </script>
子元件向父元件中傳資料 —— 事件觸發的方式
如下。
<div id="root">
<counter :count="0" @change="handlechange"></counter>
<counter :count="0" @change="handlechange"></counter>
<div>{{total}}</div>
</div>
<script>
// 區域性元件
var counter = {
props: ["count"],
template: "<div @click='handleClick'>{{number}}</div>",
data: function(){
return {
number: this.count
}
},
methods: {
handleClick: function(){
this.number ++ ;
this.$emit("change", 1);
}
}
}
var vm = new Vue({
el: "#root",
data: {
total: 0
},
components: {
counter: counter
},
methods: {
handlechange: function(step){
this.total += step;
}
}
})
</script>