vue---组件间通信
vue中比较重要的就是组件了。而组件随处可复用的特性，使得组件通信非常重要。那么组件之间通讯方式有哪些呢？
第一种：父子组件通讯：
如果是 html页面 中全局注册的组件 和 实例中局部注册的组件
HTML：
<div id="box"></div>
JS：
Vue.component('child',{
name:'child',
props:{
msg:{
type:String,
require:true
}
},
template:`
<div id='getChild'>
<h3>我是child组件</h3>
<p>{{msg}}</p>
<button @click='getParentVal'>点击获取父组件内容</button>
<button @click='sendVal'>向父组件传递内容</button>
</div>
`,
data:function(){
return {
childVal:'我是子组件中的数据'
}
},
methods:{
//这里是获取父组件中的属性或方法
getParentVal:function(){
console.log(this.$parent.age)
},
//这个是向父组件传递指定的内容
sendVal:function(){
this.$emit('sendChild',{
mssg:'我是子组件$emit传过来的内容'
})
}
}
})
Vue.component('myParent',{
name:'parent',
template:`
<div>
<button @click='getVal'>点我获取子组件内容</button>
<child :msg='parentVal' ref='getChild' @sendChild='getSendChild'></child>
</div>
`,
data:function(){
return {
parentVal:'我是parent组件传过来的值',
age:666
}
},
methods:{
//这个是获取子组件的属性或方法
getVal:function(){
console.log(this.$refs.getChild.childVal)
},
//这个是获取子组件通过emit传递过来的内容
getSendChild:function(res){
console.log(res)
}
}
})
new Vue({
el:'#box',
//这里局部注册父组件
template:`
<my-parent></my-parent>
`
})
注意事项：
1） 组件需要先注册才能使用，注册又分 局部注册 和 全局注册。局部注册需要在实例里面的template声明组件的内容，全局注册即如上例一样。
2） 组件名支持驼峰，小写，大写，横线（xxx-xxx）的写法。但是在使用组件的时候，如果是驼峰的写法，则需要写成横线的形式。如上面 组件名是myParent ，那么使用的时候 就必须是 <my-parent></my-parent> 。
3） 父组件可以获取子组件的数据和方法，通过在引用子组件的时候定义 ref='自定义名称' ，然后在子组件的template中最外层节点，定义一个id值，然后父组件中使用 this.$refs.自定名称.子组件数据 。就如同上例点击获取子组件数据一样。或者不加ref，直接使用 this.$children[第几个子组件].子组件数据。
4） 子组件可以获取父组件的数据和方法，在子组件中使用 this.$parent.子组件数据。
5） 子组件通过 $emit（'自定义名称'，数据） 来达到向父组件传递指定的数据，类似 jQuery 的 trigger 。
6） 父组件通过 实例.$on（'对应emit定义的名称',function（res）｛｝） 或者 在引用子组件的时候 <child @对应emit定义的名称='自己定义的函数名'></child> ,然后在methods中指定 自己定义的函数名 获取到的 res 就是子组件传过来的值。
7） template 里面的内容 可以用 ` ` 就是键盘上 esc 下面的那个波浪键 在英文状态下打出来的内容 ，这样就不用向es5一样用 + 加号和 ' ' 引号来合并成字符串了。
8） props 中命名方式 不支持 xxx-xxx 这种横线的格式，支持驼峰，小写。如果props中是驼峰的命名方式，那引用组件的时候就要写成对应的横线方式，例如props:[getPhone] 那么<child get-phone='xxx'></child> ，如果绑定的是动态值也是一样的写法<child :get-phone='xxx'></child> 。原因：由于html不区分大小写的特性，所以没法对应组件中的驼峰名称。
9） 为什么组件中的data必须是函数，然后返回对象？因为组件是用于复用的，彼此之间的数据一定要是唯一的。所以如果data就是一个对象，那么由于对象是引用类型，不同地方引用同一个对象，并不是引用的值，而是引用的对象的地址，所以某一处修改之后，其它的也会跟着变化，这样就不能达到数据唯一的目的。而使用函数再返回一个对象，每个对象的地址都是不同的，就能保证每次都是一个新的对象。
10）props验证方式的写法可以查看官网，里面的prop验证
11） template 里面的内容必须只有一个根元素。
如果是 .vue 这种单文件模块 的组件
这种方式和 html 页面 中注册组件有稍许的不一样。
//child 组件 <template> <div> xxxx </div> </template> <script> export default { props:[], data:function(){} } </script> <style> </style>
//parent 组件 <template> <div> <childComponent></childComponent> //如果注册的时候不重命名的话就可以使用<child></child> </div> </template> <script> import child from 'xxx' export default { data:function(){}, components:{ 'childComponent':child //如果不重名的话可以直接是{child｝ }, data:function(){} } </script> <style> </style>
说明：
1） 每个 .vue单文件组件模块，都需要在 template 中声明组件的内容，并且也只有一个根元素。
2） 在script 里面 需要 export default 组件注册的必须内容，例如props，data，mthods等。
3） 在需要引入组件的页面 import 自定义组件名称 from 'xxx' 。组件的名称自定义，支持大写，小写，驼峰，横线（xxx-xxx）。
4） import 组件之后，还需要在components中注册组件。注册的时候也可以重命名组件名称。
5） 除了上面的区别，其它的就没什么区别了，组件的通讯也和上面 html页面中组件通讯一样的处理方式。
第二种：非父子组件之间的通讯。
在 html 页面中，注册方式与父子组件无差别，也是全局注册和局部注册。
HTML：
<div id="box"></div>
JS：
//全局注册mine组件 Vue.component('mine',{ template:` <div> 我是mine组件 <button @click='sendToBrother'>点击向brother组件发送内容</button> </div> `, data:function(){ return { name:'mine', sex:'male' } }, mounted:function(){ //接收mine组件传过来的内容 transfer.$on('brotherVal',function(res){ console.log(res) }) }, methods:{ //向brother组件传递内容 sendToBrother:function(){ transfer.$emit('mineVal',this.name) } } }) //全局注册brother组件 Vue.component('brother',{ template:` <div> 我是brother组件 <button @click='sendToMine'>点击向mine组件发送内容</button> </div> `, data:function(){ return { name:'brother', age:666 } }, mounted:function(){ //接收mine组件传过来的内容 transfer.$on('mineVal',function(res){ console.log(res) }) }, methods:{ //向mine组件发送内容 sendToMine:function(){ transfer.$emit('brotherVal',this.name) } } }) //这是最重要的一步，定一个空的实例对象。 var transfer=new Vue(); new Vue({ el:'#box', data:{}, //局部注册两个组件 template:` <div> <mine></mine> <brother></brother> </div> ` })
说明：
1） 主要的就是通过一个 中间实例对象来实现 非父子组件之间的通讯
2） 还是通过 $emit（） 来发送内容 ， $on（） 来接收传递过来的内容 ，只是使用这两个方法的对象并不是 this 而是 一个空的实例对象。要注意 $on 和 $emit 中的事件名要对应
3） 不一定是mounted的时候才去接收传过来的内容，created的时候也是可以的。应该是只要生命周期里，数据初始化完成之后都行。
4） 具体是什么原理，我不清楚。也感觉没必要去搞懂
如果是 .vue 这种单文件模块 的组件
这种方式和 html 页面 中注册组件有稍许的不一样。而且通讯的方式也有一点差距。
第一步：需要中间实例对象，于是新建一个 transfer.js
import Vue from 'vue' export default new Vue();
第二步：需要传值的页面，引入这个js
//mine 组件 <template> <div> <button @click='sendToBrother'>点我向brother组件发送内容</button> </div> </template> <script> import transfer from 'transfer.js的路径' export default { data:function(){ return {} }, methods:{ sendToBrother:function(){ transfer.$emit('sendVal','这是mine组件传过来的值') } } } </script> <style> </style>
//brother 组件 <template> <div> xxx </div> </template> <script> import transfer from 'transfer.js的路径' export default { data:function(){ return {} }, mounted:function(){ transfer.$on('sendVal',function(res){ console.log(res) }) } } </script> <style> </style>
第三步：在引用这两个组件的地方，注册这两个组件。
//引入组件的页面 <template> <div> <mine></mine> <brother></brother> </div> </template> <script> import mine from 'mine组件的路径'; import brother from 'brother组件的路径' export default { data:function(){ return {} }, components:{ mine ,brother }, } </script> <style> </style>
说明：
1） 实现的方式还是差不多的 ， 都是 $on 接收内容 $emit 发送内容。
2） 只是中间实例对象需要添加到一个 js 中。然后两个组件页面都需要引入。
3） 这种通过中间实例对象的方式，也可以用于 父子、祖孙 等关系的组件通讯。
上面的通讯方式是最常见的。但是在组件通讯这块，vue 2.4 版本又增加了 inheritAttrs、attrs和listeners 。这三个的用法，后面再找个机会补上。
如果遇到 父级组件需要传给 子级组件的props值 是通过 ajax 异步请求 传入的 。那么，在子组件的生命周期中获取该props内容是获取不了的。就算是在mounted 中也是获取不了的。
这个时候的解决办法是：
<childComponent :sendVal='getval' v-if='getval'></childComponent>
一定要加一个 v-if ，这样才能在 子组件的 mounted 中获取到该值。这个地方是把我坑惨的。。。网上有推荐说如果是数组，可以使用 v-if = 'getval.length' 。这完全没必要，而且有可能还会报错，因为getval的值有可能还没返回来，再去取length肯定会报错。 如果是布尔值的话，更要注意点。
