前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件，并学会了如何定义局部组件和全局组件，上一篇内容仅仅只是对组件一个简单的入门，并没有深入的了解组件当中的其它机制，本篇博客将会带大家深入了解组件的其它知识，组件的校验，组件的通信等等。 本章目标 学会组件简单的校验 学会父组件向子组件传递数据 学会子组件向父组件传递数据 父组件向子组件传递数据 父组件向子组件传递数据实现的方式特别简单，只用使用props进行数据传递就可以了。 语法：props['属性1'，‘属性2’，...] 我找了一张图给大家参考一下 在 Vue.js 中，父子组件的关系可以总结为 props down, events up 。父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息 (1)简单的父组件向子组件传递信息 复制代码 复制代码 结果：显示标题和内容，最简单的父组件向子组件传递信息我们就实现了，但是里面还有其它的小知识点我们没有讲解到，而且后期开发都是使用vue-cli来实现父组件向子组件传递数据的，所以这个知识点下一篇博客会讲解到，不会搭建vue-cli项目的朋友可以参考这篇博客使用webstorm搭建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改变 (2)向父组件传递信息 需要向父组件传递信息的话，我们就需要子组件通知父组件，然后父组件在做相应的处理，而需要通知父组件我们就i需要用到this.$emit('事件名称',值)。 复制代码