三個技能，父元件 —> 子元件傳值（props）、子元件 —> 父元件傳值（emit用來使這個獨立的元件通過一些邏輯來融入其他元件中。舉個具體點的例子，假如你要做一輛車，車輪是要封裝的一個獨立元件，props指的就是根據整個車的外形你可以給輪子設定一些你想要的且符合車風格的花紋，圖案等；而$emit的作用則是讓這些輪子能夠和整輛車完美契合的運作起來。

（1）使用props可以實現父子元件之間的傳值
（2）使用this.$emit()可是實現子元件呼叫父元件的方法

一.在commponents檔案建立元件檔案

二.元件程式碼(寫法)

index.vue

<template>
  <div class="cusdealed">
    <div class="submited" v-if="showStatus==1">
      <div class="submitRes">
        <img class="resImg" src="../../common/img/repectSubmit.png" alt="vue 自定義元件的寫法與用法詳解">
      </div>
      <div class="submitTip tipwidth">該單據已經提交過了，不用重複提交哦！</div>
    </div>

     <div class="submited" v-if="showStatus==2">
      <div class="submitRes">
        <img class="resImg" src="../../common/img/invalid.png" alt="vue 自定義元件的寫法與用法詳解">
      </div>
      <div class="submitTip">單據已失效，不能掃單入庫！</div>
    </div>

    <div class="submited" v-if="showStatus==3">
      <div class="submitRes">
        <img class="resImg" src="../../common/img/invalid.png" alt="vue 自定義元件的寫法與用法詳解">
      </div>
      <div class="submitTip">找不到該單據，不能掃單入庫！</div>
    </div>
    
  </div>
</template>
<script type="text/javascript" src="./logic.js"></script>
<style lang="less" scoped>
  @import './style.css';
</style>
style.less

//樣式檔案
@import '../../common/less/px2rem.less';
@import '../../common/less/base.less';

.cusdealed {
 .submited {
  .submitRes {
   .px2rem(150);
   width: @px2rem;
   height: @px2rem;
  }

  .submitRes {
   .px2rem(227);
   margin: @px2rem auto 0;

   .resImg {
    width: 100%;
    height: 100%;
    display: block;
   }
  }

  .submitTip {
  .px2rem(58);
  //  height: @px2rem;
   font-family: PingFangSC-Regular;
   font-weight: 400;
   color: rgba(51,51,1);
   line-height: @px2rem;
  }
  .submitTip{
    .px2rem(32);
    font-size: @px2rem;
  }
  .tipwidth{
    .px2rem(384);
    width: @px2rem;
  }
  .submitTip{
    .px2rem(50);
    margin: @px2rem auto 0;
  }
 }
}
logic.js

//邏輯檔案
import { Spinner } from 'vux'

export default {
  name: 'cusDealing',data() {
    return {
     showStatus:1
    }
  },components: {
    Spinner,},props: {
    // showStatus: Number
   },computed: {
  
   },watch: {
    showStatus(val) {
     console.log(val,'showStatus---')
     return val;
    }
   },methods: {
    
  },mounted() {
   
  }
}

三.用法

引入元件

頁面使用

html:

 <!-- 處理完彈窗 -->
  <div class="dealed" :style="'padding-top:'+marginTop+'px;height:'+bodyheight+'px;'" v-if="dealStatus==2">
    <div class="dealedContent">
      <Cusdealed :showStatus="showStatus"></Cusdealed>
      <div class="Iknow" @click="Iknow">我知道了</div>
    </div>
  </div>

js:

效果

好了，看下正文。下面結合日常生活給大家講下道理。

在網上經常看到有朋友在問自己能不能寫vue元件 如果可以怎麼應用到自己的專案之中呢！我覺得吧這個事兒就和用煮大米飯是一個道理的

1. 首先作大米飯我們得有米吧 要不 巧婦難為無米之炊啊 因此先買好我們自己的大米也就是建立元件檔案，這裡我假設要建立一個自己loading效果元件 那麼我們就先建立 loading.vue 裡面的程式碼根據vue template相關規則寫就可以 這裡就不在贅述了 我只寫一個最最簡單的例子

2.ok了 米就這麼愉快的買好了 那麼有了米我們現在只需要把他放在鍋裡！那麼這個鍋是誰呢！好吧我們自己來背這個鍋，我們建立一個相關的.js檔案 通常元件都是一個功能自己一個資料夾那麼每個元件都應該有自己獨立的呼叫檔案（一盆大米一個鍋）那麼為了統一我們可以都叫做index.js當然了這個名字你可以隨便起 只有以後你在後續呼叫時候更換相關名字即可！重點來了 這個鍋是怎麼造的呢！話不多說直接上圖

那麼上面三個這麼違和的框是幹什麼的麼：紅色框框：我靠這還用問嗎 你呼叫那個檔案你得告訴人間啊 這裡當然要呼叫剛才我們自己建立的loading.vue檔案。 黃色框框：我靠這個黃色的框框可以說是本次本文章中重點中的重點 為什麼這麼說呢 我們要使用自己的元件就要匯出這個元件 而這個黃色框框中的程式碼就是匯出自己元件的相應配置 其中那個非常猥瑣的浪線則是本例子的”命根子“ 這個命名就是你在其他檔案中呼叫這個元件（這裡是loading元件）的名字 在這個例子中我們在呼叫元件時候就可以寫成<Loading></Loading>。白色框框：這個沒什麼好說的 相當於匯出這個元件 在main中好接受！

3.原材料大米也有了 飯鍋也有了 現在是萬事俱備只欠東風 那我們第三部就是一個字”煮“ 兩字：”開火“ 這裡就是我們要把我們這個自己建立的元件應用到我們的頁面之中 詳情請看下圖

黃色框框部分就是在主檔案main.js中 引入剛才定義的元件 和 應用 這個元件了！

最後的最後你可以在任何想用這個元件的地方插入<Loading></Loading>了 元件相應的樣式和js程式碼可以直接寫在第一步中的檔案之中！就這樣一個自己建立的元件就這麼愉快的應用啦！

（備註：本例項家裡在用vue init webpack-simple xxx的基礎之上，第一次寫文章很多不周全之處 還請各位客官諒解 ）

總結

到此這篇關於vue 自定義元件的寫法與用法詳解 的文章就介紹到這了,更多相關vue 自定義元件內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！