這裏是用了 element ui 你們也可以看一下管方的文檔 http://element.eleme.io/#/zh-CN/component/installation
組件html

<div class="Hander">
    <el-row :gutter="20">
        <el-col :span="4"><div class="back" @click="Back"><i class="el-icon-arrow-left"></i></div></el-col>
        <el-col :span="16"><div class="bg-purple">{{HanderTitle}}</div></el-col>
        <el-col :span="4"><div @click="PublicSave">{{saveTitle}}</div></el-col>
    </el-row>
</div>
 

js

$emit 一是DOM綁定事件，二是自定義事件。可以傳遞參數我在這裏用到就沒有寫

  methods: {
       PublicSave() {
            this.$emit("Public");
       },
 },

然後在引用組件的頁面去調用emin定義的方法名也就是Public

html

  <hander @Public="PublicSave"></hander>    //Public是在組件emin自定義的方法

js

  import hander from "@/components/Hander";
   methods: {
         PublicSave() {      
                  alert("1");
        }
  },
 

我實現的效果吧就是把app hander頭部定義為組件，因為組件裏面有自定義標題和右邊有保存，跳轉頁面。每個頁面的業務不一樣，所以需要通信 emin 來實現 。

vue 子父組件之間的通信，及在調用組件的地方