Vue 小學堂｜資料傳遞Part1.父子組件的資料傳遞Props與Emit

Vue在component之間做資料傳遞時會有哪些交換方式呢？在上一篇component的for迴圈小範例中，有介紹到props，這一個章節就帶大家快速了解Props與Emit的差異吧~

如果忘記怎麼區別Props與Emit，記得看看這張圖片喔~

● Props：用在父層傳遞資料給子組件，在子組件的框架中 v-bind 父層的資料，再到子組件的設定中加入props

●Emit：而Emit就是子組件傳遞資料給父層了，在子組件中v-on一個事件，讓事件以$emit回傳資料給父層

1.Props：props是使用v-bind(縮寫為"：")，將父層的data帶入子組件，所以要將v-bind寫在父層呼叫子組件的框架上

props
--------------------------------------------------------------------template
   ...
   #app
      .flex
         .col
             props_area(:props_demo="item" v-for="item in props_data" :key="props_data.index") //在這裡設定v-bind
   ...
srcipt
   var props_area = {
      props: ['props_demo'], //props呼叫父層的props_data
      template: '<p>Type: {{ props_demo.title }} </p>',
   };
export default {
   ...
   data () {
      return {
         props_data:[
           {'title':'Demo1'},
           {'title':'Demo2'},
           {'title':'Demo3'},
        ]
      }
   },
   ...
})

2.Emit：$emit是使用v-on(縮寫為"@")，來上傳data到父層中，所以要將v-on寫在on在子組件的框架裡

Emit
--------------------------------------------------------------------
template
   ...
   #app
      .flex
         .col
             emit_area(:emit_demo="item" v-for="item in emit_data" :key="emit_data.index")
   ...
script
var emit_area = {
    props: ['emit_demo'],
    template: '<div class="simple_box"><p>{{ emit_demo.title }} </p> <br><a class="btn" @click="resetName">Try It</a></div>', //使用v-on設定click呼叫resetName的function，利用$emit來替換父層的資料
    methods:{
       resetName: function(){
           var oldname = this.emit_demo.title;
           if(oldname.indexOf('Change_') != -1){
               this.emit_demo.title = oldname.replace('Change_','');
           }else{
               this.emit_demo.title = 'Change_'+oldname;
           }
           this.$emit('Change_', this.emit_demo.title);
       }
     }
};
export default {
   data:{
     emit_data:[
       {'title':'Simple_A'},
       {'title':'Simple_B'},
       {'title':'Simple_C'},
     ]
  },
   components: {
     'emit_area': emit_area,
     'props_area': props_area
  }
}

那我們就來看看線上的Props/Emit小範例吧：

Props與Emit的用法很常見，要記住Props與Emit是父與子組件之間的資料傳遞，下一篇就來大家看看子組件與子組件的資料傳遞做法吧！