使用Vue封装组件完成计数器插件功能

今天得空自己封装了一个组件的计数器小功能，分享给大家。
代码都有注释详细。

注意点：组件里的父子传值；以及如何使用使用Vue.use( )开发插件。

那就直接来上代码啦

/index文件



    
    
    
    


    

        
        
    

/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: `

                   
                   
                    
                   
`,
        //生命周期函数 实例创建后自动调用赋值
        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.myCountthis.myMax)this.myCount=this.myMax
                else if(this.myCount

好啦照常来分析查阅的文档
https://cn.vuejs.org/v2/guide/plugins.html#使用插件