Vue作為最近最炙手可熱的前端框架，其簡單的入門方式和功能強大的API是其優點。而同時因為其API的多樣性和豐富性，所以他的很多開發方式就和一切基于組件的React不同，如果沒有對Vue的API（有一些甚至文檔都沒提到）有一個全面的了解，那么在開發和設計一個組件的時候有可能就會繞一個大圈子，所以我非常推薦各位在學習Vue的時候先要對Vue核心的所有API都有一個了解。

成都創新互聯2013年開創至今，先為城北等服務建站，城北等地企業，進行企業商務咨詢服務。為城北企業網站制作PC+手機+微官網三網同步一站式服務解決您的所有建站問題。

舉個例子，通知組件notification基本是現代web開發標配，在很多地方都能用到。而在以Vue作為核心框架的前端項目中，因為Vue本身是一個組件化和虛擬Dom的框架，要實現一個通知組件的展示當然是非常簡單的。但因為通知組件的使用特性，直接在模板當中書寫組件并通過v-show或者props控制通知組件的顯示顯然是非常不方便的，而且如果要在action或者其他非組件場景中要用到通知，那么純組件模式的用法也無法實現。那么有沒有辦法即用到Vue組件化特性方便得實現一個通知組件的展現，又能夠通過一個簡單的方法調用就能顯示通知呢？本文就是來講述這個實現方法的。

目標

實現一個Vue的通知組件，可以直接在組件內調用
通過方法調用，比如Vue.$notify({...options})來調用通知組件
結合上述兩種方式，復用代碼

實現通知組件

這一步非常的簡單，我相信做過一點Vue開發的同學都能寫出一個像模像樣的通知組件，在這里就不贅述，直接上代碼

<template>
 <transition name="fade" @after-leave="afterLeave" @after-enter="setHeight">
  <div
   v-show="visible"
   :class="['notification']"
   :
   @mouseenter="clearTimer"
   @mouseleave="createTimer"
  >
   <span class="content">{{content}}</span>
   <a class="btn" @click="handleClose">{{btn || '關閉'}}</a>
  </div>
 </transition>
</template>

<script>
export default {
 name: 'Notification',
 props: {
  content: {
   type: String,
   default: ''
  },
  btn: {
   type: String,
   default: ''
  }
 },
 data () {
  return {
   visible: true
  }
 },
 computed: {
  style () {
   return {}
  }
 },
 methods: {
  handleClose (e) {
   e.preventDefault()
   this.doClose()
  },
  doClose () {
   this.visible = false
   this.$emit('close')
  },
  afterLeave () {
   this.$emit('closed')
  },
  clearTimer () {},
  createTimer () {},
  setHeight () {}
 }
}
</script>

網頁名稱：你不知道的Vue技巧之--開發一個可以通過方法調用的組件(推薦)-創新互聯
本文網址：http://vcdvsql.cn/article2/cdioic.html

成都網站建設公司_創新互聯，為您提供網站設計公司、App開發、響應式網站、移動網站建設、自適應網站、做網站

廣告

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