通过npm引用的vue组件使用详解

 什么是组件:组件是Vue.js最强大的功能之一。组件可以扩展HTML元素,封装可重用的代码。在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能。在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展。

成都创新互联公司自2013年起,是专业互联网技术服务公司,拥有项目网站建设、成都做网站网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元宝坻做网站,已为上家服务,为宝坻各地企业和个人服务,联系电话:028-86922220

    如何注册组件?

    需要使用Vue.extend方法创建一个组件,然后使用Vue.component方法注册组件。Vue.extend方法格式如下:

var MyComponent = Vue.extend({
  // 选项...后面再介绍
})

    如果想要其他地方使用这个创建的组件,还得个组件命个名:

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

   命名之后即可在HTML标签中使用这个组件名称,像使用DOM元素一样。

本文章通过实现一个vue-dialog的弹出层组件,然后附加说明如果发布此包到npm,且能被其他项目使用。

功能说明

  • 多层弹出时,只有一个背景层。
  • 弹出层嵌入内部组件。
  • 弹出层按钮支持回调
  • 源码下载

实现

通过npm引用的vue组件使用详解

  • 多层弹出时,只有一个背景层
  • 利用两个组件实现,一个背景层组件(只提供一个背景层,组件名:background.vue),一个弹出层内容管理组件(实现多个内容层的管理,组件名:master.vue)。
  • 弹出层嵌入内部组件

使用vue的component组件实现,他可以完美支持。

弹出层按钮支持回调

在master.vue中实现,详细解析此代码

html代码



  • comps:内部组件的集合
  • realIndex:一个computed属性,读取props的mIndex属性,表示内部层的zIndex层级关系。
  • component加载组件
  • btns:表示按钮的集合,现还不支持组件独立配置按钮列表。
  • style:此方法用于生成内部组件居中的css代码。

js代码:

  • open方法,用于打开弹出层,且返回一个Promise。
  • 嵌入background.vue组件,用于提供背景层。
  • clickHandler方法:master.vue组件按钮的事件响应函数,会resolve在open方法中提供的promise。

css代码:

如何实用

  • 首先需要在顶层引入master.vue,然后嵌入到与app组件平级,如下代码:
new Vue({
 el: '#app',
 template: '
', components: { App } })

一定要指定ref值,这是弹出层实现的关键。

  • 在任意一个子组件中如下使用:
let promise = this.$root.$refs.hDialog.open({
  template: '
第二层了
' }) promise.then(function (arg) { alert('第二层' + arg.type) arg.close() })
  • 使用$root.$refs找到弹出层管理组件
  • 使用调用其open方法,并接受一个promise类型的返回值
  • 使用promise即可。

发布到npm

  • 如果组件需要被其他人引用,最好使用commonjs2规范,webapck如下配置:
output: {
path: './dist',
filename: '[name].js',
library: 'vue-hdialog',
libraryTarget: 'commonjs2'
}
  • 在npmjs上注册一个账号
  • 利用npm login 登录
  • 使用npm publish 发布,如果你想卸载可以用npm unpublish --force.
  • 发布是需要package.json检测version和name字段,如果已存,或者是存在被卸载的都不行。
  • package.json中的main节点是指定其他引用时,默认导出的文件。

以上所述是小编给大家介绍的通过npm引用的vue组件使用详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持!


当前标题:通过npm引用的vue组件使用详解
网页URL:http://pwwzsj.com/article/gichdc.html