本文共 4817 字，大约阅读时间需要 16 分钟。

前言

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

本章目标

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

父组件向子组件传递数据

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

语法：props['属性1'，‘属性2’，...]

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

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

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

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

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

(2)props传递整个对象

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

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

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

data必须是函数

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

结果：

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

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

结果：

 我们在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)示例一

结果：

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

(2)示例二

结果：

子组件向父组件传递数据

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

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

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

(1)子组件实现功能

            
                            
    
            
                 父组件的count:
     {{count}}        
    
                    

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

(2)向父组件传递信息

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

            
                            
    
            
                 父组件的count:
     {{count}}        
    
                    

结果：

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

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

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

            
                            
    
            
                 父组件的count:
     {{count}}            
     点击        
    
                    

结果：

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

            
                            
    
            
                 父组件中的count
     {{count}}        
    
                    

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

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

(4)任务清单

            
                            
    
                 任务：
                 
     
                
      
            
     
        
    
                    

结果：

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

总结

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