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


這里是用了 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 來實現 。


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com