什么是組件：組件是Vue.js最強(qiáng)大的功能之一。組件可以擴(kuò)展HTML元素，封裝可重用的代碼。在較高層面上，組件是自定義的元素，Vue.js的編譯器為它添加特殊功能。在有些情況下，組件也可以是原生HTML元素的形式，以is特性擴(kuò)展。

成都創(chuàng)新互聯(lián)公司自2013年起，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目網(wǎng)站建設(shè)、成都做網(wǎng)站網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元寶坻做網(wǎng)站,已為上家服務(wù),為寶坻各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:028-86922220

    如何注冊(cè)組件？

    需要使用Vue.extend方法創(chuàng)建一個(gè)組件，然后使用Vue.component方法注冊(cè)組件。Vue.extend方法格式如下：

var MyComponent = Vue.extend({
  // 選項(xiàng)...后面再介紹
})

    如果想要其他地方使用這個(gè)創(chuàng)建的組件，還得個(gè)組件命個(gè)名：

Vue.component('my-component', MyComponent)

   命名之后即可在HTML標(biāo)簽中使用這個(gè)組件名稱，像使用DOM元素一樣。

本文章通過實(shí)現(xiàn)一個(gè)vue-dialog的彈出層組件，然后附加說明如果發(fā)布此包到npm，且能被其他項(xiàng)目使用。

功能說明

• 多層彈出時(shí)，只有一個(gè)背景層。
• 彈出層嵌入內(nèi)部組件。
• 彈出層按鈕支持回調(diào)
• 源碼下載

實(shí)現(xiàn)

• 多層彈出時(shí)，只有一個(gè)背景層
• 利用兩個(gè)組件實(shí)現(xiàn)，一個(gè)背景層組件（只提供一個(gè)背景層，組件名：background.vue），一個(gè)彈出層內(nèi)容管理組件（實(shí)現(xiàn)多個(gè)內(nèi)容層的管理，組件名：master.vue)。
• 彈出層嵌入內(nèi)部組件

使用vue的component組件實(shí)現(xiàn)，他可以完美支持。

彈出層按鈕支持回調(diào)

在master.vue中實(shí)現(xiàn)，詳細(xì)解析此代碼

html代碼

<template>
 <div> 
  <div class="modal-content" v-for="(comp,index) in comps" v-bind: >
   <div class="modal-header" >
   header
   </div>
   <div class="modal-body">
   <component :is="comp"></component>
   </div>
   <div class="modal-footer">
   <button type="button" class="btn btn-default" v-on:click="clickHandler(btn.value, comp, index)" v-for="btn in btns" >{{btn.text}}</button>
   </div>
  </div> 
  <hDialogBack ref="back" v-bind:z-index="realIndex-1" ></hDialogBack>
 </div>
</template>

• comps：內(nèi)部組件的集合
• realIndex：一個(gè)computed屬性，讀取props的mIndex屬性，表示內(nèi)部層的zIndex層級(jí)關(guān)系。
• component加載組件
• btns：表示按鈕的集合，現(xiàn)還不支持組件獨(dú)立配置按鈕列表。
• style：此方法用于生成內(nèi)部組件居中的css代碼。

js代碼:

<script>
import hDialogBack from './background'

function getclientPoint () {
 return {
 width: document.documentElement.clientWidth || document.body.clientWidth,
 height: document.documentElement.clientHeight || document.body.clientHeight
 }
}

export default {
 name: 'HDialog',
 data () {
 return {
  comps: []
 }
 },
 props: {
 'btns': {
  type: Array,
  default: function () {
  return [{ text: 'ok', value: 'ok'}, { text: 'cancel', value: 'cancel'}]
  }
 },
 'mIndex': {
  type: Number,
  default: 19861016
 }
 },
 computed: {
 realIndex: function () {
  return this.mIndex
 }
 },
 components: {
 hDialogBack
 },
 methods: {
 open: function (comp) {
  comp.promise = new Promise(function (resolve, reject) {
  comp.resolve = resolve
  comp.reject = reject
  })
  comp.width = comp.width || 600
  comp.height = comp.height || 400
  this.comps.push(comp)
  if (!this.$refs.back.show) {
  this.$refs.back.open()
  }
  return comp.promise
 },
 clickHandler: function (type, comp, index) {
  let self = this
  let close = function () {
  self.comps.splice(index, 1)
  if (self.comps.length === 0 && self.$refs.back.show) {
   self.$refs.back.close()
  }
  }
  /** 只提供promise模式 */
  comp.resolve({'type': type, 'close': close})
 },
 style: function (index, comp) {
  let point = getclientPoint()
  return {
  zIndex: this.realIndex + index,
  width: comp.width + 'px',
  height: comp.height + 'px',
  left: ((point.width - comp.width) / 2) + 'px',
  top: ((point.height - comp.height) / 2) + 'px'
  }
 }
 }
}
</script>

• open方法，用于打開彈出層，且返回一個(gè)Promise。
• 嵌入background.vue組件，用于提供背景層。
• clickHandler方法：master.vue組件按鈕的事件響應(yīng)函數(shù)，會(huì)resolve在open方法中提供的promise。

css代碼：

<style>
.modal-content {
 position: absolute;
}
</style>

如何實(shí)用

• 首先需要在頂層引入master.vue，然后嵌入到與app組件平級(jí)，如下代碼：

new Vue({
 el: '#app',
 template: '<div><App></App><HDialog ref="hDialog" ></HDialog></div>',
 components: { App }
})

一定要指定ref值，這是彈出層實(shí)現(xiàn)的關(guān)鍵。

• 在任意一個(gè)子組件中如下使用：

let promise = this.$root.$refs.hDialog.open({
  template: '<div>第二層了</div>'
 })
 promise.then(function (arg) {
  alert('第二層' + arg.type)
  arg.close()
})

• 使用$root.$refs找到彈出層管理組件
• 使用調(diào)用其open方法，并接受一個(gè)promise類型的返回值
• 使用promise即可。

發(fā)布到npm

• 如果組件需要被其他人引用，最好使用commonjs2規(guī)范，webapck如下配置:

output: {
path: './dist',
filename: '[name].js',
library: 'vue-hdialog',
libraryTarget: 'commonjs2'
}

• 在npmjs上注冊(cè)一個(gè)賬號(hào)
• 利用npm login 登錄
• 使用npm publish 發(fā)布，如果你想卸載可以用npm unpublish --force.
• 發(fā)布是需要package.json檢測(cè)version和name字段，如果已存，或者是存在被卸載的都不行。
• package.json中的main節(jié)點(diǎn)是指定其他引用時(shí)，默認(rèn)導(dǎo)出的文件。

以上所述是小編給大家介紹的通過npm引用的vue組件使用詳解，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持！

本文名稱：通過npm引用的vue組件使用詳解
網(wǎng)頁(yè)網(wǎng)址：http://chinadenli.net/article12/gichdc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、自適應(yīng)網(wǎng)站、企業(yè)建站、移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站導(dǎo)航、域名注冊(cè)

廣告

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