Vue父子組件交流(props、emit)簡單教學

最近開始寫專案啦~之前剛接觸Vue時因比較複雜，所以就先強迫越級直接學了Vuex，現在回來一般小案子，父子組件的溝通就簡單透過props、emit來實現吧。

一張圖代表一切(大概是這樣)

由上圖的圖片看來，一個溝通模式父元件透過props的方式向子元件傳送數值，而子元件要呼叫父元件是透過emit的方式傳送事件(events)。

父對子(Props):
因各元件為獨立狀態，無法隨意的溝通或共享數據，並且有兄弟元件、父子元件的關係，而父元件要傳送數值給自己的子元件就是使用props屬性。

範例:
父組件程式碼

<template>
    <child :text="text1" message='I am a child.' ></child> 
</template>
 
<script>
 
import child from './child.vue';
 
export default {
    components: {
        child
    },
    data () {
        return {
            text1: 'father props';
        }
    }
}
<script>

子組件程式碼

<template>
   <div>{{text}}{{message}}</div>
</template>
 
<script>
  
export default {
    props: {
        text:"",
        message:""
    }
}
<script>

這樣就能把數值、資料傳到父組件，我們來整理一下props功能吧!

• 為元件中自訂屬性。
• 傳送數值可用陣列、物件、字串 等等。
• 透過父元件傳送給子元件。

警告:千萬不能直接改props傳送過來的數值，想要直接更改父元件，這作法是不正確的。

子對父(Emit):
父對子是用Props，而子要調用父則是使用$emit，來觸發事件的。
而在Vue當中綁定事件是用v-on(@)，而要怎麼使用呢?
範例:


父組件程式碼

<template>
    <child @childpass="func" ></child> 
</template>
 
<script>
 
import child from './child.vue';
 
export default {
    components: {
        child
    },
    methods:{
      func(){
        //假如有傳送值，記得塞入function.
        console.log("hello,this is father")
      }
    }
}
<script>

子組件程式碼

<template>
   <button @click="emitevents"></button>
</template>
 
<script>
  
export default {
    methods:{
      emitevents(){
        console.log("hello,this is child")
        this.$emit('childpass')//呼叫事件
        this.$emit('childpass',value)//假如有數值等等
      }
    }
}
<script>

這個就是簡單的emit操作，而emit還可以傳送在兄弟元件之中，需要搭配$on來監聽事件，$emit來觸發事件，有興趣的各位可以去官方文件看看。

其實還有很多元件操作上的方式，這裡主要講比較常用和看到的，在於比較小的專案或單純父子元件是非常好用的，但若是出現祖父、曾祖父元件，可能就要考慮是否引入Vuex囉!