Vue（自定义事件+组件）实现简易表单

最新推荐文章于 2025-01-07 14:49:20 发布

大兵的猫

最新推荐文章于 2025-01-07 14:49:20 发布

阅读量385

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue js

本文链接：https://blog.youkuaiyun.com/Error_ABC/article/details/108847838

Vue 专栏收录该内容

15 篇文章

订阅专栏

该博客介绍了一个使用Vue.js实现的购物车组件，组件具有复用性，通过遍历Vue实例对象的数据来填充表单，并通过自定义事件在组件间通信，实现了商品的增删、数量调整及总价计算等功能。用户可以通过全选和单个选择商品，并对选中商品进行操作。代码中还包含了一个用于商品数量加减的子组件。

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

Vue组件实现简易表单

描述：封装Vue组件，组件可以复用，只需改变组件内容，通过遍历vue实例对象内的数据内容，将数据放进组件，并在组件内部通过$emit()将需要操作的事件以及参数传递出去，由父组件接收后再利用vue实例里的函数进行相应操作，注意这里不要直接在组件内部调用vue实例的函数，必须要通过父组件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light.css">
    <style>
      .child{
         width: 700px;
         height: 50px;
         display: flex;
         line-height: 50px;
         justify-content: space-between;
      }
    </style>
</head>
<body>
    <div id="bigBox">
        <person :p="list" v-for="list in List" @change="del" @changecount="countall" @chec="ch" @addnum="addnum" @reducenum="reducenum"></person> //调用组件，遍历List数组，将遍历到的每一项用变量p传入组件内部   绑定一系列自定义事件
        <span><input type="checkbox" name="" id=""  @click="checked()" v-model="checkedall"></span><span>总价：{{count}}</span>//全选框
        
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
     var Btn={                         //加减按钮组件
       data(){
           return {
           }
       },
       props:["b"],                     //接收变量b带来的参数
       template:`<div class="chilBtn">
                <button @click="reduce(b.id)">-</button>
                    {{ b.num }}                  //提取b中的数据
                    <button @click="add(b.id)">+</button> 
                </div> 
           `,
        methods:{
              add(id){             
                this.$emit('addnum',id)     //点击过后，传值给父组件   父组件触发名称为addnum的自定义事件
                this.$emit('changesm')   //同上
              },
              reduce(id){
                  this.$emit('reducenum',id)   //点击过后，传值给父组件   父组件触发名称为reducenum的自定义事件
                  this.$emit('changesm')  //同上
              }
           }
    }

    var Person={            //每一条list数据的组件
        data(){
            return {  
            }
        },
        props:["p"],        //接收父组件传进来的p变量的参数
        template:`<div class="child">
               <span><input type="checkbox" name="" id=""  @click="ch(p.id)" v-model="p.check"></span> 
                 <span>
                    {{ p.name }}
                 </span> 
                 <span>
                    {{ p.price }}
                 </span> 
                 <btn :b=p @changesm="countall" @addnum="addnum" @reducenum="reducenum"></btn>     //调用上面的Btn组件，并将p的值用变量b传进去
                 <span>{{p.price*p.num}}</span>
                 <button @click="del(p.id)">删除</button>
                </div> 
           `,
           methods:{
                del(id){
                    this.$emit('change',id)       
                    this.$emit('changecount')
                },
                ch(id){
                    this.$emit('chec',id)
                    this.$emit('changecount')
                },
                countall(){
                    this.$emit('changecount')
                },
                addnum(id){
                    this.$emit('addnum',id)
                },
                reducenum(id){
                    this.$emit('reducenum',id)
                }
           },
        components:{           //要在一个组件内部用别的组件一定要先注册要用的组件
           Btn
        }
    }
   
    var vm=new Vue({
       el:"#bigBox",
       data:{
           checkedall:false,
           count:0,
           List:[{id:"pikaqiu" ,name:"皮卡丘",price:300,num:1,check:false},
                 {id:"huluwa" ,name:"葫芦娃",price:250,num:1,check:false},
                 {id:"xiaowanzi" ,name:"小丸子",price:200,num:1,check:false},
                 {id:"xiaopzhu" ,name:"小P猪",price:120,num:1,check:false}]
       },
       methods:{
            addnum(id){
                let obj = this.List.find((item)=>item.id == id);
                obj.num++
            },
            reducenum(id){
                let obj = this.List.find((item)=>item.id == id);
                let n=obj.num-1
                obj.num = Math.max(n,1)
            },
            countall(){
                this.count=0 
                for(var i=0;i<this.List.length;i++){
                    if(this.List[i].check==true){
                        this.count+=this.List[i].num*this.List
                        [i].price
                    }
                }
            },
            del(id){
                    this.List = this.List.filter((item)=>{  
                    return item.id != id
                })
            },
            checked(){          //勾选全选框时，将所有复选框选中
                if(this.checkedall==false){
                    for(var i=0;i<this.List.length;i++){
                        this.List[i].check=true
                    }
                }else{
                    for(var i=0;i<this.List.length;i++){
                        this.List[i].check=false
                    }
                }
                this.countall()
            },
            ch(id){         //实现多选框勾选时遍历判断是否是全选，是的话就自动勾选全选框
                var n=0;
                let obj = this.List.find((item)=>item.id == id);
                obj.check=!obj.check
                for(var i=0;i<this.List.length;i++){
                        if(this.List[i].check==true){
                             n++
                        }
                    }
                    if(n==this.List.length){
                        this.checkedall=true
                    }else{
                        this.checkedall=false
                    }
            }
       },
       components:{ 
           Person,Btn
        }
    })
    
</script>
</html>

注：初学vue，此代码很多地方还需优化

效果图：
在这里插入图片描述