Vue组件注册初探——修改 使用 以及使用内置方法

    在网上下了一个插件，结果它是这种形式的。有一个css文件夹，里头装着仨.css,还有一个js文件夹，装着1个.js文件,以及一个.html文件。如图所示——

这是个电子钟，一打开之后它会随着时间而变化，效果如下——

但是我想要的是一个电子称的示数显示器——

所以我模改了一下，让它成为了这个样子，但是我用的是Vue框架，还是得把它封装成一个Vue组件

 

要求：

1.js文件夹里的所有函数都可以被Vue页面调用

2.css可被加载

 

上网也找到了很多教程，我使用的是vue-cli 3。

Step 1:

在src根目录下新建一个packages用来装组件，如图，我新建了一个css文件夹，js文件夹，一个.vue文件，和一个用于组件注册的index.js。然后我把原文件中所有js放在js文件夹中，css文件放在css文件夹中。

<!--原文件.html中的部分-->
<template>
    <div class="clock" style="height:100px;">
		<div class="digit big">
			<div class="segment"></div>
			<div class="segment"></div>
			<div class="segment"></div>
			<div class="segment"></div>
			<div class="segment"></div>
			<div class="segment"></div>
			<div class="segment"></div>
		</div>
	</div>
</template>

<!--相对引入css文件夹中的.css-->
<!--请注意我用的是 @import ''; -->
<style scoped>
@import './css/demo.css';
@import './css/style.css';
@import './css/normalize.css';
</style>

<!--相对引入js文件夹下的js-->
<script>
<!--这是哪里来的？请看文章下文-->
import { setAllNumber } from "./js/digital-clock.js";

export default {
    <!--
    组件名称——这样注册就可以在其他.vue文件中用<electronic-scale></electronic-scale>引入此组件
    -->
  name:'electronic-scale',
  data() {
    return {
		
	}
  },
  methods:{
      setAllNumber(num1,num2,num3,num4){
		  setAllNumber(num1,num2,num3,num4)
	  }
      <!--看到import { setAllNumber } from了么?
      这里是对js文件里的setAllNumber做二次封装呢，
      之后在其他.vue文件直接调用新的setAllNumber()函数就可以了-->
  }
  }

</script>

css文件是一点也不用改，js文件可要按需改一下哦，

var digitSegments = xxx;
//全局变量

var setAllNumber = function (num1, num2, num3, num4) {
     //...函数体
}

var setNumber = function (digit, number, on) {
     //...函数体
  }
}

//最后 把你想要的方法暴露在外，这样上面的import {setAllNumber} from 也就可以解释了
export{
  setAllNumber
}

js文件最需要加的是export{}

这样.vue已完成。

Step2:

写packages目录中组件目录下的index.js,进行组件单独注册，待会还要写个全局的index.js呢！那这个能不能不写，直接用全局的?我觉得应该可以，这是两种不同的使用方式，全局&局部，以后再研究吧。现在来介绍一下局部index.js的写法。

import ElectronicScale from './ElectronicScale';
ElectronicScale.install = function(Vue){
  Vue.component(ElectronicScale.name, ElectronicScale);
}
/* 支持使用标签的方式引入 */
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue);
}

export default ElectronicScale;

 这个自己模改一下就好了。install是组件注册的重点。

Step3:

全局index.js。它与App.vue同级。

 它的写法：也是自己模改一下哈

import ElectronicScale from './packages/ElectronicScale/index.js';
// ...如果还有的话继续添加

const components = [
  ElectronicScale
  // ...如果还有的话继续添加
]

const install = function (Vue, opts = {}) {
  components.map(component => {
    Vue.component(component.name, component);
  })
}

/* 支持使用标签的方式引入 */
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue);
}

export default {
  install,
  ElectronicScale
  // ...如果还有的话继续添加
}

 Step4:

组件的使用。

1.组件的显示（使用标签）：

2.组件方法的使用：

ref='es'相当于这个组件的id是es。然后this.$refs.es指的是调用子组件的方法，也就是封装好的 新的setAllNumber()，

接下来就是vue的正常使用了,this.toZero()调用方法即可。

 

如果有什么问题请在下方私信我，我会对博客进行修正，如果有问题也欢迎一起讨论。2019.7.12