今天得空自己封裝了一個元件的計數器小功能，分享給大家。
代碼都有注釋詳細。
注意點：元件裡的父子傳值；以及如何使用使用Vue.use( )開發插件。
那就直接來上代碼啦
/index檔案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 這裡相當于 父元件 -->
<my-input-number count="0" min="5" max="10" @count-change="fatherChange"></my-input-number>
</div>
</body>
</html>
<!-- 引入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<!-- 引入封裝好的插件 -->
<script src="./inputNumber-ui.js"></script>
<script>
Vue.use(inputNumberUI)
// 執行個體化一個app
const app = new Vue({
el: "#app",
data: {
count: 0,
},
methods:{
fatherChange(count){
// 監聽數字的變化
console.log(count)
},
}
})
</script>
/inputNumber-ui.js檔案
// 沙箱獨立封裝
(function(window){
// 執行個體化對象
let inputNumberUI = {};
// 根據vue文檔增加install方法
/**
* Vue Vue.use時 會傳入的Vue構造函數
* options 自己初始化插件時 可以傳入的選項
* */
inputNumberUI.install = function (Vue, options) {
// 注冊元件
Vue.component('my-input-number', {
data: function () {
return {
myCount: 0,
// 最小值預設0
myMin: 0,
// 最大值預設10
myMax: 10,
}
},
// 父元件将資料傳遞給子元件
props: ['count', 'min', 'max'],
// 模闆導入
template: `<div class="my-input-number" style="width:180px;height:40px;display:flex;border:1px solid #ccc;x">
<input type="button" value="-" style="width:50px;font-size:25px" @click="reduce" >
<input type="text" v-model="myCount" style="outline:none;width:80px;font-size:25px;text-align:center" @click="Change">
<input type="button" value="+" style="width:50px;font-size:25px" @click="add">
</div>`,
//生命周期函數 執行個體建立後自動調用指派
created() {
this.myCount=this.count;
this.myMin=this.min||0;
this.myMax=this.max||10;
},
methods: {
// 增加
add(){
this.myCount++;
if(this.myCount>this.myMax){
this.myCount=this.myMax
};
// 子元件把值傳遞給父元件
this.$emit('count-change',this.myCount)
},
// 減少
reduce(){
this.myCount--;
if(this.myCount<this.myMin){
this.myCount=this.myMin
};
// 子元件把值傳遞給父元件
this.$emit('count-change',this.myCount)
},
// 個數改變 做資料類型轉換
Change(){
// 解析字元串傳回整數
this.myCount=parseInt(this.myCount);
if(this.myCount>this.myMax)this.myCount=this.myMax
else if(this.myCount<this.myMin)this.myCount=this.myMin
// 傳值
this.$emit('count-change',this.myCount)
}
}
},
)}
// 把方法暴露出去
window.inputNumberUI=inputNumberUI
})(window);
好啦照常來分析查閱的文檔
https://cn.vuejs.org/v2/guide/plugins.html#使用插件
![vue項目：npm打包-S和-D差別：[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)