情況一：父元件給子元件傳值方法，使用props

父頁面：parent.vue

<template>
    <div class="sidebar_contianer">
        <sidebar-item :routerData="transmitData"></sidebar-item>
    </div>
</template>
<script>
import sidebarItem from './sidebarItem'
export default {
    data(){
        return
 
{
            transmitData:{
                title:'首頁',
                uuid:'123'
            }
        }
    },
    components:{
        sidebarItem
    }
}
</script>

第一步：用import引入子元件

第二步：在components中注入子元件

第三步：在子元件中定義一個指令:routerData="transmitData"  （routerData名稱需要和子元件中的props保持一致,transmitData是要傳遞給子元件的資料）

子頁面：child.vue

<script>
export default {
    name:'sidebarItem',
    props:{
        transmitData:{
            type:Object,
            default:null
        }
    }
}
</script>

第四步：在子元件中定義props屬性，transmitData的type可以自定義型別（但是必須和父元件中的資料型別一致，否則會報錯），default是預設值。

情況二：子元件要給父元件傳值方法，使用$emit

子頁面：a.vue

<template> 
    <div class="testCom">
        <input type="text" v-model="message" />
        <button @click="click">傳送訊息給爸爸</button>
    </div>
</template>
<script>
export default {
    data() {
        return {
          message: '我是來自子元件的訊息'
        }
    },
    methods: {
      click() {
            //1、childFn 元件方法名，父元件中用childFn方法接收子元件中的資料；2、message是傳遞給父元件的資料
            this.$emit('childFn', this.message);
        }
    }    
}
</script>

第一步：this.$emit("方法名","傳遞給父元件的資料")

<template>
    <div>
      <child-com @childFn="parentFn"></child-com>
    </div>
</template>

<script>
export default {
    // ...
    data: {
        message: ''
    },
    methods: {
       parentFn(childData) {
        this.message = childData;
      }
    }
}
</script>

第二步：父元件中注入子元件（此處程式碼中省略，如要參考請看情況一）

第三步：定義方法childFn（必須和子元件中方法名一致），parentFn定義可隨意。