vue父子組件通信

父組件向子組件傳遞數據

• 父組件一共需要做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)
 },
 }