[JavaScript知识库]自定义vue组件 和 自定义vue组件npm包

自定义组件

 <div id="components-demo" style="margin-top:10px">
        <button-counter></button-counter>
 </div>

import Vue from 'vue';

Vue.component('button-counter',{
  template: '<button @click="count+=1">点击了{{count}}次</button>',
  data: function() {
    return {
      count: 0
    }
  }
})

new Vue({
  el: '#components-demo',
  data: {}
})

自定义组件的npm包

父子传值啥的都没问题

开发自定义组件

新建自定义组件vue项目，这里我们直接vue-cli4整上

vue create vue-settlement-component
npm run serve

开发自定义组件 VueSettlementComponents

<template>
  <div>
    请输入两个数：<input type="text" v-model="frist"> + <input type="text" v-model="second"> <button @click="plus">计算</button>
  </div>
</template>
<script>
export default {
  name:'vueSettlementComponents',
  props:{
    third:{
      type: Number,
      default: 0
    }
  },
  data() {
    return{
      frist: 0,
      second: 0
    }
  },
  methods:{
    plus() {
      alert(Number(this.frist)+Number(this.second)+Number(this.third))
      this.$emit('all',Number(this.frist)+Number(this.second)+Number(this.third))
    }
  }

}
</script>

src下新建index.js

import VueSettlementComponents from '../src/components/vueSettlementComponents.vue'
const coms = [VueSettlementComponents]; // 将来如果有其它组件,都可以写到这个数组里

// 批量组件注册
const install = function (Vue) {
  coms.forEach((com) => {
    Vue.component(com.name, com);
  });
};

export default install;

install方法会在 vue.use(plugin) 时调用

配置打包方式(只打包自定义组件，可配置):

 "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build:components": "vue-cli-service build --target lib ./src/index.js --name vueSettlementComponents --dest package",
    "lint": "vue-cli-service lint"
  },

--target lib 关键字 指定打包的目录
--name 打包后的文件名字
--dest 打包后的文件夹的名称

指定文件夹打包后，生成bundle文件

上传自定义组件的npm包

在生成bundle文件的文件夹下，创建npm包

npm init -y
npm login
npm publish

这个时候，npm官方就有 vue-settlement-component 这个包了

使用自定义组件的npm包

npm install vue-settlement-component

main.js

// 引入自己定义的第三方vue组件，全局使用
import VueSettlementComponents from "vue-settlement-components";
Vue.use(VueSettlementComponents)

页面中使用

   <div style="margin-top:40px">
       <div>自定义组件封装的npm包(已经传入值4了)</div>
      <vue-settlement-components :third="4" style="margin-top:10px"></vue-settlement-components>
   </div>