怎么在vue中實(shí)現(xiàn)自定義組件-創(chuàng)新互聯(lián)

本篇文章為大家展示了怎么在vue中實(shí)現(xiàn)自定義組件，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

我們提供的服務(wù)有：成都網(wǎng)站制作、成都網(wǎng)站建設(shè)、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、新密ssl等。為1000+企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的新密網(wǎng)站制作公司

（1）使用props可以實(shí)現(xiàn)父子組件之間的傳值

（2）使用this.$emit()可是實(shí)現(xiàn)子組件調(diào)用父組件的方法

一.在commponents文件創(chuàng)建組件文件

二.組件代碼(寫法)

index.vue

<template>
  <div class="cusdealed">
    <div class="submited" v-if="showStatus==1">
      <div class="submitRes">
        <img class="resImg" src="../../common/img/repectSubmit.png" >
      </div>
      <div class="submitTip tipwidth">該單據(jù)已經(jīng)提交過了，不用重復(fù)提交哦！</div>
    </div>

     <div class="submited" v-if="showStatus==2">
      <div class="submitRes">
        <img class="resImg" src="../../common/img/invalid.png" >
      </div>
      <div class="submitTip">單據(jù)已失效，不能掃單入庫！</div>
    </div>

    <div class="submited" v-if="showStatus==3">
      <div class="submitRes">
        <img class="resImg" src="../../common/img/invalid.png" >
      </div>
      <div class="submitTip">找不到該單據(jù)，不能掃單入庫！</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, 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" : v-if="dealStatus==2">
    <div class="dealedContent">
      <Cusdealed :showStatus="showStatus"></Cusdealed>
      <div class="Iknow" @click="Iknow">我知道了</div>
    </div>
  </div>

js:

效果

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

在網(wǎng)上經(jīng)?？吹接信笥言趩栕约耗懿荒軐憊ue組件 如果可以怎么應(yīng)用到自己的項(xiàng)目之中呢！我覺得吧這個事兒就和用煮大米飯是一個道理的

1. 首先作大米飯我們得有米吧 要不 巧婦難為無米之炊啊 因此先買好我們自己的大米也就是創(chuàng)建組件文件，這里我假設(shè)要創(chuàng)建一個自己loading效果組件 那么我們就先創(chuàng)建 loading.vue 里面的代碼根據(jù)vue template相關(guān)規(guī)則寫就可以 這里就不在贅述了 我只寫一個最最簡單的例子

2.ok了 米就這么愉快的買好了 那么有了米我們現(xiàn)在只需要把他放在鍋里！那么這個鍋是誰呢！好吧我們自己來背這個鍋，我們創(chuàng)建一個相關(guān)的.js文件 通常組件都是一個功能自己一個文件夾那么每個組件都應(yīng)該有自己獨(dú)立的調(diào)用文件（一盆大米一個鍋）那么為了統(tǒng)一我們可以都叫做index.js當(dāng)然了這個名字你可以隨便起 只有以后你在后續(xù)調(diào)用時(shí)候更換相關(guān)名字即可！重點(diǎn)來了 這個鍋是怎么造的呢！話不多說直接上圖

那么上面三個這么違和的框是干什么的么：紅色框框：我靠這還用問嗎 你調(diào)用那個文件你得告訴人間啊 這里當(dāng)然要調(diào)用剛才我們自己創(chuàng)建的loading.vue文件。 黃色框框：我靠這個黃色的框框可以說是本次本文章中重點(diǎn)中的重點(diǎn) 為什么這么說呢 我們要使用自己的組件就要導(dǎo)出這個組件 而這個黃色框框中的代碼就是導(dǎo)出自己組件的相應(yīng)配置 其中那個非常猥瑣的浪線則是本例子的”命根子“ 這個命名就是你在其他文件中調(diào)用這個組件（這里是loading組件）的名字 在這個例子中我們在調(diào)用組件時(shí)候就可以寫成<Loading></Loading>。白色框框：這個沒什么好說的 相當(dāng)于導(dǎo)出這個組件 在main中好接受！

3.原材料大米也有了 飯鍋也有了 現(xiàn)在是萬事俱備只欠東風(fēng) 那我們第三部就是一個字”煮“ 兩字：”開火“ 這里就是我們要把我們這個自己創(chuàng)建的組件應(yīng)用到我們的頁面之中 詳情請看下圖

上述內(nèi)容就是怎么在vue中實(shí)現(xiàn)自定義組件，你們學(xué)到知識或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識儲備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)頁名稱：怎么在vue中實(shí)現(xiàn)自定義組件-創(chuàng)新互聯(lián)
當(dāng)前網(wǎng)址：http://bm7419.com/article20/dicgco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊、搜索引擎優(yōu)化、網(wǎng)站設(shè)計(jì)、服務(wù)器托管、面包屑導(dǎo)航、網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)