Vue的组件化给前端开发带来极大的便利，这种依赖数据来控制Dom的模式，区别于以前的开发控制Dom的开发理念，这也导致了一种情况，在Vue中是单向数据流的，意味着只能从父组件向子组件传值，不允许子组件向父组件传值。
这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。 ---vue教程
然而当我们把组件拆分到足够细的时候，子组件控制父组件的数据，或者兄弟组件之间的传值就变得尤为突出，这里我将总结各式各样的传值，函数调用的方法。
父组件中的通信方法
阅读完官方文档后，我们一定会对props有强烈的印象，然而在父组件中可不止有这种通信的方式。
props
命名规范HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名：
<blog-post post-title="hello!"></blog-post>ponent('blog-post', {// 在 JavaScript 中是 camelCase 的props: ['postTitle'],template: '<h3>{{ postTitle }}</h3>'})
传递静态或动态 Prop 假如你想传字符串给子组件只需要给便签添加属性就可以了
//这里的title的内容就会传给子组件<blog-post title="My journey with Vue"></blog-post>
当然那些非字符串的类型就直接依赖于v-bind进行传值（Number、Boolean、Array...）
<!-- 动态赋予一个变量的值 --><blog-post v-bind:title="post.title"></blog-post><!-- 动态赋予一个复杂表达式的值 --><blog-postv-bind:title="post.title + ' by ' + post.author.name"></blog-post>
子组件接收
常见的就是声明式接收：props: [...]数组形式
// 定义一个名为 button-counter 的新组件ponent('button-counter', {props: ['title', 'count', 'isPublished', 'commentIds', 'author'],data: function () {return {counts: this.count //this指向即可获取props值}},template: ''})
但官方更推荐对象形式的接收，至少为每个prop指定类型
ponent('my-component', {props: {// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)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 ['success', 'warning', 'danger'].indexOf(value) !== -1}}}})
type 可以是下列原生构造函数中的一个：
StringNumberBooleanArrayObjectDateFunctionSymbol
使用上我们除了this.prop外还可以使vm.$props（当前组件接收到的 props 对象。Vue 实例代理了对其 props 对象属性的访问。）
禁用特性继承
如果你不希望组件的根元素继承特性，这尤其适合配合实例的 $attrs 属性使用,你可以在组件的选项中设置 :
ponent('my-component', {inheritAttrs: false,// ...})
当然还有非声明式的接收$attrs（2.4.0 新增）：
包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。
<base-input label="姓名" class="username-input" placeholder="Enter your username" data-date-picker="activated"></base-input>ponent("base-input", {inheritAttrs: false, //此处设置禁用继承特性props: ["label"],template: `<label>{{label}}{{$attrs.placeholder}} //这里不用声明props可以直接调用{{$attrs["data-date-picker"]}}<input v-bind="$attrs"/></label>`,mounted: function() {console.log(this.$attrs);}})
provide/inject
provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。
// 父级组件提供 'foo'var Provider = {provide: {foo: 'bar'},// ...}// 子组件注入 'foo'var Child = {inject: ['foo'],created () {console.log(this.foo) // => "bar"}// ...}
提示：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。
更多的用法是用来注入方法的：
// 父级组件提供 'foo'var Provider = {provide: {foo: this.fn},methods:{fn(){console.log('bar')}}// ...}// 子组件注入 'foo'var Child = {inject: ['foo'],created () {this.foo(); // => "bar"}// ...}
vm.$children
通过Vue实例代理的$children获取其子组件的值，为一个类数组，你可以在控制台中打印出来，里面有子组件中的一切属性。
vm.$slots
插槽的使用更多在官方文档中查看，这里显示基础的使用方法：
<navigation-link url="/profile">Your Profile</navigation-link>
然后你在 的模板中可能会写为：
<av-bind:href="url"class="nav-link"><slot></slot></a>
除了用标签获取传递的数据，我更喜欢用$slots处理，比如在这个输入框中，你既要设定lable又要设定placeholder，然而它们两其实是同一个数据，这时候我们可以这样：
<inputBox :readonly='readonly' v-model='item.contactName'>联系人</inputBox><inputBox :readonly='readonly' v-model='item.mobile'>电话</inputBox>var Component = {props: {readonly: {default: false},type: {default: 'text'},value: [String, Number],maxlength: {default: 20}},data() {return {inputValue: this.value}},watch: {value(newValue) {this.inputValue = newValue},inputValue(newValue) {this.$emit('input', newValue)}},template: `<div class='input'><cube-input v-model.trim="inputValue" :placeholder="'请输入' + this.$slots.default[0].text" :readonly="readonly" :type="type" :maxlength="maxlength"><template v-slot:prepend><slot></slot></template></cube-input></div>`};
其他的为ui框架的组件不用在意，重要的是this.$slots.default[0].text这一段对$slots的应用。
小结
通过上面的四种方法，我们可以看出，它们都是可以完成值得传递或者获取的，除了$slots不能传递方法函数外，其他三种均可完成。
子组件中的通信方法
首先我们先要理解子组件传递的原理，下面这张图大家在很多的地方都看过了，实际上就是父组件通过prop给子组件下发数据，子组件通过事件给父组件发送信息，而使用的工具为：
$on(evntName)监听事件；$emit(eventName,optionalPayload)触发事件； 接下来的方法都是对这个原理实现的变形
v-on / $emit
首先我们来实现一个单向传递的例子：
//父组件<template><child @childHandler="parentHandle"></child></template><script>export default {data: {message: ''},methods: {parentHandle(send) {this.message = send;}}}</script>//子组件<template><button @cilck="sendHandle"></button></template><script>export default {date: {news:"from children"},methods: {sendHandle() {this.$emit('childHandler',this.news);}}}</script>
上面的过程我就不再描述一遍了，你们自己看代码理解理解，这样我们就实现了由子组件传递数据到父组件。但在更复杂的场景时，我们不仅需要修改父组件的值，还需要通过父组件的值影响到子组件的渲染，也就是实现子父组件的数据双向绑定。
更多的场景下我们希望其是自动触发数据交互的，这时我们需要用到watch，现在我们对上面的代码进行修改一下。
//父组件<template><child @childHandler="parentHandle" :status="status" :name="name"><button @cilck="emptyHandle">清空</button></child></template><script>export default {data: {status:'男',name:'Max.Law'},methods: {parentHandle(send) {this.child.status = send;}，emptyHandle(){status = '';}}}</script>//子组件<template><p><span>姓名：</span>{{name}}</p><p><span>性别：</span>{{childStatus}}</p><button @cilck="sendHandle('男')">男</button><button @cilck="sendHandle('女')">女</button></template><script>export default {props: {status: [String, Number],name: [String, Number]},date: {childStatus:this.status},methods: {sendHandle(data) {this.childStatus = data},watch: {status(newValue) {this.childStatus = newValue},childStatus(newValue) {this.$emit('childHandler', newValue)}},}</script>
这里实现的是在子组件的性别状态继承于父组件，子组件修改性别的状态的同时改变父组件的数据以便父组件使用。
我们在使用vue的过程中很清楚，假如子组件直接写{{status}}来继承父组件的值，在修改状态的时候vue会提示不建议直接修改父组件的值来改变子组件（vue中一个重要逻辑，当前组件只处理当前组件的数据），所以我们使用childStatus来接收父组件的值。
那我们如何做到子组件的改变能影响父组件，父组件更新值时又能影响子组件呢？这时候重点都在这个watch上：
当status改变时则改变childStatus的值， 当childStatus改变时，用上面的方法与父组件通信，改变父组件的值
这样我们就完成子父组件的数据双向绑定，整个过程为： 1. 给子组件帮一个通信方法 2. 绑定一个传值对象 3. 监控数据的变化
看到这里有没有熟悉的感觉，是不是跟 v-modle 很像，vue提供的双向绑定的指令，而 v-modle 的本质就是绑定了一个input的方法，和一个value值，这时候我们就能把上面的双向数据绑定的方法简化了（v-modle是在本组件内实现双向绑定，并没有做到子父组件双向绑定）
v-model/vm.$emit
还记得我上面讲$slot的代码吗？这里我们简化一下：
//父组件<template><inputBox :readonly='readonly' v-model='brand'>设备品牌</inputBox></template><script>export default {data: {brand:'默认'}}</script>//子组件<template><div><h1><slot></slot></h1><input v-model="inputValue"></input></div></template><script>export default {props: {value: [String, Number]},data() {inputValue: this.value},watch: {value(newValue) {this.inputValue = newValue},inputValue(newValue) {this.$emit('input', newValue)}}}</script>
这时候，我们不仅可以修改子组件中的输入框值，还是能同时改变父组件的值，这在做上传表单的时候尤为重要，保证我们父组件一直都是获取用户最新输入的值。（这个在我做微信公众号一个表单项目时候突发奇想的实现）
this.$parent
这个是vue提供的api，使用也很简单，场景一般适合在父组件写入多个子组件需要调用的公共方法，比provide/inject占用性能要低，也更明确作用域。
只需要在父组件注册方法，在子组件这样使用：this.$parent.parentFn();这里要注意层级，也许是孙组件，或者从孙组件，可以这样调用：this.$parent.$parent.grandfatherFn();只需要打印出当前的this.$parent查看，确定层级即可。
好了，上面就是 《 Vue组件传值与通信集合 》的全部内容了，希望能够对你有所帮助，如有疑问欢迎留言~
