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

本文分享了作者自己封装的一个Vue计数器组件插件,详细介绍了如何使用Vue.use()开发插件,并通过示例代码展示了组件的父子传值过程。该插件实现了数字的增减功能,支持设置最小值和最大值。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

注意点:组件里的父子传值;以及如何使用使用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/vue@2.5.17/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#使用插件

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值