父組件向子組件傳遞數據
- 父組件一共需要做4件事
- 1.import son from './son.js' 引入子組件 son
- 2.在components : {"son"} 裡註冊所有子組件名稱
- 3.在父組件的template應用子組件,
- 4.如果需要傳遞數據給子組件,就在template模板裡寫
// 1.引入子組件 import counter from './counter' import son from './son' // 2.在ccmponents裡註冊子組件 components : { counter, son }, // 3.在template裡使用子組件 // 4.如果需要傳遞數據,也是在templete裡寫
- 子組件只需要做1件事
- 1.用props接受數據,就可以直接使用數據
- 2.子組件接受到的數據,不能去修改。如果你的確需要修改,可以用計算屬性,或者把數據賦值給子組件data裡的一個變量
// 1.用Props接受數據 props: [ 'num' ], // 2.如果需要修改得到的數據,可以這樣寫 props: [ 'num' ], data () { return { number : this.num } },
子組件向父組件傳遞數據
- 父組件一共需要做2件事情
- 在template裡定義事件
- 在methods裡寫函數,監聽子組件的事件觸發
// 1. 在templete裡應用子組件時,定義事件changeNumber // 2. 用changeNumber監聽事件是否觸發 methods: { changeNumber(e){ console.log('子組件emit了',e); this.number = e }, }
- 子組件一共需要1件事情
- 在數據變化後,用$emit觸發即可
// 1. 子組件在數據變化後,用$emit觸發即可,第二個參數可以傳遞參數 methods: { increment(){ this.number++ this.$emit('changeNumber', this.number) }, }