亲宝软件园·资讯

展开

vue学习笔记(八)组件校验&通信

一只流浪的KK 人气:1

前言

在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大家深入了解组件的其它知识,组件的校验,组件的通信等等。

本章目标

  • 学会组件简单的校验
  • 学会父组件向子组件传递数据
  • 学会子组件向父组件传递数据

父组件向子组件传递数据

父组件向子组件传递数据实现的方式特别简单,只用使用props进行数据传递就可以了。

语法:props['属性1',‘属性2’,...]

我找了一张图给大家参考一下

在 Vue.js 中,父子组件的关系可以总结为 props down, events up 。父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息

(1)简单的父组件向子组件传递信息

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>父组件向子组件传递信息</title>
    </head>
    <body>
        <div id="app">
            <my-content :title='title' :content='content'></my-content>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            let vm=new Vue({
                el:'#app',
                data:{
                    title:'标题',
                    content:'内容'
                },
                methods:{
                    
                },
                computed:{
                    
                },
                components:{
                    'myContent':{
                        props:['title','content'],
                        template:`<div>
                            <h1>{{title}}</h1>
                            <p>{{content}}</p>
                        </div>`
                    }
                }
                
            })
            
        </script>
    </body>
</html>

结果:显示标题和内容,最简单的父组件向子组件传递信息我们就实现了,但是里面还有其它的小知识点我们没有讲解到,而且后期开发都是使用vue-cli来实现父组件向子组件传递数据的,所以这个知识点下一篇博客会讲解到,不会搭建vue-cli项目的朋友可以参考这篇博客使用webstorm搭建vue-cli项目后续的许多文章都会使用vue-cli中的组件进行讲解,而不是通过简单的引入vue.js文件了,所以强烈推荐大家一定要学会搭建vue-cli项目。

总结:父组件向子组件传递数据使用props

(2)props传递整个对象

假设父组件中的对象含有多个属性,我们每一个属性都需要进行传递,那么是不是需要绑定每一个属性呢?

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>props传递多个属性</title>
    </head>
    <body>
        <div id="app">
            <my-content :title="attr.title" :content1="attr.content1" :content2="attr.content2"></my-content>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            let vm=new Vue({
                el:'#app',
                data:{
                    attr:{
                        title:'新闻主题',
                        content1:'新闻内容1',
                        content2:'新闻内容2',
                    }
                },
                methods:{
                    
                },
                computed:{
                    
                },
                components:{
                    'myContent':{
                        props:['title','content1','content2'],
                        template:'<div><h4>{{title}}</h4><span>{{content1}}</span><span>{{content2}}</span></div>'
                    }
                }
                
            })
            
        </script>
    </body>
</html>

现在这个实例所表现出来的就是一个对象里面有很多个属性,现在仅仅只有三个属性而已,我们的父组件绑定属性的时候就需要绑定三个属性,如果是100个或者1000个那么绑定组件的那个标签不是很长吗?和同事一起开发的话,你的同事看到那么长的代码肯定会怀疑人生的,所以为了解决这个问题我们将代码改写下面那样。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>props传递多个属性</title>
    </head>
    <body>
        <div id="app">
            <my-content  v-bind="attr"></my-content>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            let vm=new Vue({
                el:'#app',
                data:{
                    attr:{
                        title:'新闻主题',
                        content1:'新闻内容1',
                        content2:'新闻内容2',
                    }
                },
                methods:{
                    
                },
                computed:{
                    
                },
                components:{
                    'myContent':{
                        props:['title','content1','content2'],
                        template:'<div><h4>{{title}}</h4><span>{{content1}}</span><span>{{content2}}</span></div>'
                    }
                }
                
            })
            
        </script>
    </body>
</html>

在这里我们使用v-bind将整个对象打包传递过去,这样一来就大大的减少了代码的冗余度了,那么你的同事肯定夸你小伙子不错,你就等着被领导表扬吧!(自己脑补出来的)

data必须是函数

为什么说data必须是一个函数呢?这个知识点在上一篇博客中没有提及到,现在的话我们来讨论一下,这个案例就足够说明了。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>data必须是函数</title>
    </head>
    <body>
        <div id="app">
            <my-content></my-content>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            Vue.component('myContent',{
                data:{
                    msg:'hello world'
                },
                template:'<span>{{msg}}</span>',
            });
            let vm=new Vue({
                el:'#app'
            })
        </script>
    </body>
</html>

结果:

 控制台显示vue.js给出的警告也是提出data必须是一个函数,好的既然规定data必须是一个函数,那我们就按照它说的来做。看看结果如何

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>data必须是函数</title>
    </head>
    <body>
        <div id="app">
            <my-content></my-content>
            <my-content></my-content>
            <my-content></my-content>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var data={
                count:1
            }
            Vue.component('myContent',{
                data:function(){
                    return data;
                },
                template:'<button @click="count+=1">{{count}}</button>',
            });
            let vm=new Vue({
                el:'#app'
            })
        </script>
    </body>
</html>

 

现在的话,我们的data是一个函数,但是解决一个问题的同时新的问题又出现了,点击任意一个按钮的时候发现其它按钮的值都会发生改变,这是因为我们引用了同一个对象,我们知道对象是引用传递的,所以为了改变这一种情况,我们让每个组件内部都有自己的状态而不会去干涉其它组件。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>data必须是函数</title>
    </head>
    <body>
        <div id="app">
            <my-content></my-content>
            <my-content></my-content>
            <my-content></my-content>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            Vue.component('myContent',{
                data(){
                    return{
                        count:1
                    }
                },
                template:'<button @click="count+=1">{{count}}</button>',
            });
            let vm=new Vue({
                el:'#app'
            })
        </script>
    </body>
</html>

结果:

 我们在data中使用return返回新的对象,这样一来每一个组件都有自己本身的状态了,从而不会去影响其它的组件。

组件的校验

组件的校验从字面上看就是对父组件向子组件传递的信息中,子组件对父组件传递过来的信息进行验证,一方面是为了数据的安全性,另一方面给他人使用的时候也可以限制他人传递过来的数据的验证。

Vue.component('example', {
  props: {
    // 基础类型检测 (`null` 意思是任何类型都可以)
    propA: Number,
    // 多种类型
    propB: [String, Number],
    // 必传且是字符串
    propC: {
      type: String,
      required: true
    },
    // 数字,有默认值
    propD: {
      type: Number,
      default: 100
    },
    // 数组/对象的默认值应当由一个工厂函数返回
    propE: {
      type: Object,
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        return value > 10
      }
    }
  }
})

type可选:

  • Sting
  • Number
  • Boolean
  • Function
  • Object
  • Array

(1)示例一

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>组件的校验示例一</title>
    </head>
    <body>
        <div id="app">
            <my-content :name="name" :age="age" :sex="sex"></my-content>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            let vm=new Vue({
                el:'#app',
                data:{
                    name:'小明',
                    age:18,
                    sex:'男'
                },
                methods:{
                    
                },
                computed:{
                    
                },
                components:{
                    'myContent':{
                        props:{
                            name:{
                                type:Number,
                                required:true,
                            },
                            age:{
                                type:Number,
                                default:20,
                            },
                            sex:{
                                type:String,
                                default:'女'
                            }
                        },
                        template:'<div><span>{{name}}</span><span>{{age}}</span><span>{{sex}}</span></div>'
                    }
                }
                
            })
            
        </script>
    </body>
</html>

结果:

我们对name做了验证规定,name的类型必须是Number,而传递过来的却是String,所以vue.js给出了警告,对name属性也要求是必须传递的参数,required:true,对sex给定默认值,当我们没有传递sex的时候,子组件中的sex默认值是女的,所以有了组件的这一校验,大大提高的数据的安全性。

(2)示例二

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>组件的校验示例二</title>
    </head>
    <body>
        <div id="app">
            <my-content name="喜马拉雅" :size="8848" :is-boy="false" address="中国西藏"></my-content>
        </div>
        <script type="text/template" id="template1">
            <div>姓名:{{name}}身高:{{size}}是否是男生:{{isBoy}}位置:{{address}}重量:{{weight.ton}}亿吨</div>
        </script>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            Vue.component('myContent',{
                template:'#template1',
                props:{
                    name:{
                        type:String,    //类型
                        required:true,    //规定必填
                    },
                    size:Number,    //规定整形
                    isBoy:Boolean,    //规定布尔值
                    age:[Number,String],//    多种类型
                    address:{
                        type:String,
                        default:'中国',
                        validator:function(value){
                            return value.indexOf('中国')>=0
                        }
                    },
                    weight:{
                        type:Object,
                        default:function(){
                            return {ton:999999999}
                        }
                    },
                }
                
            })
            let vm=new Vue({
                el:'#app',
                data:{
                    
                },
                methods:{
                    
                },
                computed:{
                    
                }
                
            })
            
        </script>
    </body>
</html>

结果:

子组件向父组件传递数据

我们知道,父组件是使用 props 传递数据给子组件,但如果子组件要把数据传递回去,应该怎样做?那就是自定义事件!每个 Vue 实例都实现了事件接口(Events interface),即:

  • 使用 $on(eventName) 监听事件
  • 使用 $emit(eventName) 触发事件

接下来我们一步一步对子组件向父组件传递数据进行讲解,先来看下一个特别简单的示例,这个需求是这样的,当我们改变子组件的count的时候,父组件的count也需要改变

(1)子组件实现功能

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>子组件向父组件传递数据</title>
    </head>
    <body>
        <div id="app">
            <my-content :count="count"></my-content>
            父组件的count:<span>{{count}}</span>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            let vm=new Vue({
                el:'#app',
                data:{
                    count:1
                },
                methods:{
                    
                },
                computed:{
                    
                },
                components:{
                    'myContent':{
                        data(){
                            return{
                                ownCount:this.count
                            }
                        },
                        props:['count'],
                        template:'<div>子组件的count:<span>{{ownCount}}</span><button @click="handleClick">add</button></div>',
                        methods:{
                            handleClick(){
                                this.ownCount++;
                            }
                        }
                    }
                }
                
            })
            
        </script>
    </body>
</html>

我们通过父组件向子组件传递了count值,然后子组件中的count值在点击之后会发生改变,但是这仅仅实现了子组件的值改变,并没有实现父组件中的count改变

(2)向父组件传递信息

需要向父组件传递信息的话,我们就需要子组件通知父组件,然后父组件在做相应的处理,而需要通知父组件我们就i需要用到this.$emit('事件名称',值)。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>子组件向父组件传递数据</title>
    </head>
    <body>
        <div id="app">
            <my-content :count="count" @add="handleAdd"></my-content>
            父组件的count:<span>{{count}}</span>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            let vm=new Vue({
                el:'#app',
                data:{
                    count:1
                },
                methods:{
                    handleAdd(count){
                        this.count=count;
                    }
                },
                computed:{
                    
                },
                components:{
                    'myContent':{
                        data(){
                            return{
                                ownCount:this.count
                            }
                        },
                        props:['count'],
                        template:'<div>子组件的count:<span>{{ownCount}}</span><button @click="handleClick">add</button></div>',
                        methods:{
                            handleClick(){
                                this.ownCount+=10;
                                this.$emit('add',this.ownCount);
                            }
                        }
                    }
                }
                
            })
            
        </script>
    </body>
</html>

结果:

我们在子组件点击按钮的时候添加了this.$emit()来通知父组件,然后将需要注册的事件和每次改变的值传递了过去,这时父组件注册子组件传递过来的事件和值,然后将父组件中的值替换子组件传递过来的就可以了。

(3)优化子组件向父组件传递信息

其实我们可以做到让父组件来控制子组件中count值的变化,假设我们每次让子组件增加10,我们先来一个小案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>子组件向父组件传递数据</title>
    </head>
    <body>
        <div id="app">
            <my-content :count="count" @add="handleAdd" v-bind="info"></my-content>
            父组件的count:<span>{{count}}</span>
            <button @click="handleClick">点击</button>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            let vm=new Vue({
                el:'#app',
                data:{
                    count:1,
                    info:{
                        name:'男',
                        age:18
                    }
                },
                methods:{
                    handleAdd(count){
                        this.count=count;
                    },
                    handleClick(){
                        this.info.name='女'
                    }
                },
                computed:{
                    
                },
                components:{
                    'myContent':{
                        data(){
                            return{
                                ownCount:this.count
                            }
                        },
                        props:['count','name','age'],
                        template:'<div><span>姓名:{{name}}</span><br/>子组件的count:<span>{{ownCount}}</span><button @click="handleClick">add</button></div>',
                        methods:{
                            handleClick(){
                                this.ownCount+=10;
                                this.$emit('add',this.ownCount);
                            }
                        }
                    }
                }
                
            })
            
        </script>
    </body>
</html>

结果:

 

当我们点击按钮的时候发现父组件传递给子组件的姓名发生了改变,那么我们只要改变父组件中的count的值,那么子组件中count的值也会发生改变

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>子组件向父组件传递数据</title>
    </head>
    <body>
        <div id="app">
            <my-content :count="count" @add="hanldeAdd"></my-content>
            父组件中的count<span>{{count}}</span>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            let vm=new Vue({
                el:'#app',
                data:{
                    count:1
                },
                methods:{
                    hanldeAdd(count){
                        this.count+=count;
                    }
                },
                computed:{
                    
                },
                components:{
                    'myContent':{
                        data(){
                            return{
                                //ownCount=this.count;
                            }
                        },
                        props:['count'],
                        template:'<div>子组件中的count<span>{{count}}</span><button @click="handleClick">add</button></div>',
                        methods:{
                            handleClick(){
                                this.$emit('add',10)
                            }
                        }
                    }
                }
                
            })
            
        </script>
    </body>
</html>

这样一来父子组件的简单通信就全部讲完了,接下来为了巩固一下父子组件之前通信的知识,我们来做一个任务清单

总结:子组件向父组件传递信息this.$emit('事件名称',值)

(4)任务清单

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>任务清单</title>
    </head>
    <body>
        <div id="app">
            任务:<input type="text" v-model="newTask" @keyup.enter="addNew" placeholder="请输入您要完成的任务" />
            <ul>
                <li is="todoImte" v-for="(item,index) of tasks" :title="item" @remove="removeItem(index)"></li>
            </ul>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            Vue.component('todoImte',{
                props:['title'],
                template:"<li>{{title}}<button @click='$emit(\"remove\")'>X</button></li>"
            });
            let vm=new Vue({
                el:'#app',
                data:{
                    newTask:'',
                    tasks:['买一本书','写一次博客','和朋友一起吃饭']
                },
                methods:{
                    addNew(){
                        this.tasks.unshift(this.newTask);
                        this.newTask='';
                    },
                    removeItem(index){
                        if(confirm('确定要删除吗?')){
                            this.tasks.splice(index);
                        }
                    }
                },
                computed:{
                    
                }
                
            })
            
        </script>
    </body>
</html>

结果:

 

 

任务清单中,首先有个添加任务的框,然后通过addNew方法将任务添加到任务清单中,子组件中通过this.$emit()告诉父组件执行相应的方法,任务清单中,我们可以添加任务清单也可以删除任务清单,添加任务清单的话,没有涉及组件通信,二删除任务清单的时候,子组件通知父组件需要删除那个任务,然后将需要删除任务的索引传递过去,父组件根据传递过来的index进行删除。

总结

本篇博客主要讲了三个知识点,组件的校验,父组件向子组件传递信息(通过props),子组件向父组件传递信息(通过this.$emit),本篇博客讲解的内容也比较简单,但是我认为这仅仅也还是组件的开始,下一遍博客我们将会讲解vue-cli中的组件通信,毕竟这个才是重点,现在的组件通信也才是入门。欢迎大家在博客下方评论,我们一起交流。

加载全部内容

相关教程
猜你喜欢
用户评论