一、前言
Vue 组件作用域是孤立的，不允许在子组件模板内直接引用父组件的数据。必须使用特定的方法才能实现组件之间的数据传递。
首先，用脚手架工具 vue-cli 创建一个项目，其中 App.vue 是父组件，components 文件夹下都是子组件。
二、父组件向子组件传递数据
在 Vue 中，可以使用 props 向子组件传递数据。
子组件部分：
这是 header.vue 的
HTML 部分，logo 是在 data 中定义的变量。如果需要从父组件获取 logo 的值，子组件就需要使用
props: ['logo']获取父组件传值。
在
props 中添加元素之后，就不需要在 data 中再添加变量声明。
父组件部分：
在调用组件的时候，使用
v-bind 将 logo 的值绑定为 App.vue 中定义的变量 logoMsg。
然后就能将
App.vue中 logoMsg 的值传给 header.vue 了：
三、子组件向父组件传递数据
子组件通过事件传递数据给父组件。
子组件部分：
这是 login.vue 的
HTML 部分，当<input>的值发生变化的时候，将 username 传递给 App.vue。
首先声明一个方法setUser，用change事件来调用 setUser。
在 setUser 中，使用了
$emit 来遍历 transferUser 事件，并传参this.username。
其中transferUser是自定义事件，功能类似于一个中转，this.username将通过这个事件传递给父组件。
父组件部分：
在父组件 App.vue 中，声明了一个方法 getUser，用 transferUser 事件调用 getUser 方法，获取到从子组件传递过来的参数 username。
getUser方法中的参数 msg 就是从子组件传递过来的参数username。
四、子组件向子组件传递数据
Vue 并没有直接子对子组件传参的方法，建议将需要传递数据的子组件，都合并为一个组件。如果一定需要子对子传参，可以先从子组件传到父组件，再传到子组件。
为便于开发，Vue 推出了一个状态管理工具 Vuex（详参博文《Vue进阶（五）：与 Vuex 的第一次接触》），可以很方便实现组件之间的参数传递。
五、Prop校验
子组件用Props接收父组件传来的数据有多种形式：
1.数组形式
props: [data1, data2]
数组形式相当于直接接收消息，不做任何校验，一般来说，不建议使用数组形式。
2.简单对象形式
props: { data1: String, data2: Array}
简单对象形式对父组件传递的值进行了类型校验，如果传过来的值类型不一致，控制台会报错。
3.复杂对象形式
props: {
data1: {
type: String, //设定类型
required: true, //是否必须
default: 'default value', //默认值
validator (value) { return (value.length < 5) } }, //校验规则
data2: {
type: Array,
required: true,
default: () => ['', '', '']
}}
复杂对象校验情况下，作为对象属性的参数可以写为对象形式，参数对象含有4个属性，
【！】 注意： props 会在一个组件实例创建之前进行验证，所以实例的属性 (如 data、computed 等) 在 default 或 validator 函数中是不可用的。
StringNumberBooleanArrayObjectDateFunctionSymbol
额外的，type 还可以是一个自定义的构造函数，并且通过 instanceof 来进行检查确认。
例如，给定下列构造函数：
function Person (firstName, lastName) {
this.firstName = firstName
this.lastName = lastName
}
可以使用：
Vue.component('blog-post', {
props: {
author: Person
}
})
来验证 author prop 的值是否是通过 new Person 创建的。
六、拓展阅读
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
