Vue--组件通信的几种方式
一，不同层级组件通信（传值）
1，父组件 <---> 子组件
--- v-bind，props---：父传子
- 在渲染的子组件上使用 v-bind 绑定要传递的父组件的数据；
- 在渲染的子组件上使用 v-bind 绑定要传递的父组件的 数据；
---v-on，$emit（）---：子传父
- 在渲染的子组件标签名上使用 v-on 绑定要传递的父组件的 methods；
- 在子组件中使用 this.$emit() 调用事件名，调用的同时传递子组件的数据；
1 <body> 2 <div id="app"> 3 <comm1 :father="mesg" @get="data"></comm1> 4 <comm1></comm1> 5 <h3>--父组件部分----</h3> 6 <p>{{child}}</p> 7 </div> 8 <script src="../lib/vue.js"></script> 9 <script> 10 const Comm1 = { 11 // props:['father'], 12 props:{ 13 father:{ 14 typeof:String, 15 default:'默认值' 16 } 17 }, 18 data:()=>({ 19 data:'子组件数据' 20 }), 21 template:`<div><h3>--子组件部分--</h3> 22 <p>{{father}}</p> 23 <button @click="updata">更新父组件的数据</button></div>`, 24 methods:{ 25 updata(){ 26 this.$emit('get',this.data) 27 } 28 } 29 } 30 new Vue({ 31 el: "#app", 32 data: { 33 mesg:'父组件数据', 34 child:'' 35 }, 36 components:{ 37 Comm1 38 }, 39 methods:{ 40 data(v){ 41 console.log(v); 42 this.child = v 43 } 44 } 45 }) 46 </script> 47 </body>
2，获取父组件数据，获取子组件数据
---$parent，$root---：获取父组件数据，根组件数据。
---$refs ref---：获取子组件的数据。 需要先在子组件上标记ref属性；
1 <body> 2 <div id="app"> 3 <h2 ref="h2data">标题</h2> 4 <child ref="childdata"></child> 5 </div> 6 <script src="../lib/vue.js"></script> 7 <script> 8 const child = { 9 data(){ 10 return { 11 mesg:'子组件的数据' 12 } 13 }, 14 template:` 15 <div> 16 <h1>{{mesg}}</h1> 17 <button @click="getparant">click</button> 18 </div> 19 `, 20 methods:{ 21 getparant(){ 22 console.log('通过$parent获取：' + this.$parent.parant) 23 console.log('通过$root获取：' + this.$root.parant); 24 } 25 } 26 } 27 28 new Vue({ 29 el: "#app", 30 data: { 31 parant:'父组件的数据' 32 }, 33 components:{ 34 child 35 }, 36 mounted(){ 37 console.log(this.$refs.h2data); 38 console.log(this.$refs.childdata); 39 } 40 }) 41 </script> 42 </body>
3，爷级组件 <----> 孙级组件
--- $attrs + $listeners---：跨爷孙级，桥接；
1 <body> 2 <div id="app"> 3 <h1>{{data}}</h1> 4 <parent :data="first" @click="get"></parent> 5 </div> 6 <script src="../lib/vue.js"></script> 7 <script> 8 const sun = { 9 template:` 10 <div> 11 <h3>孙子</h3> 12 <p>{{this.$attrs.data}}</p> 13 <button @click="$emit('click','谢谢')">click</button> 14 </div> 15 `, 16 methods:{ 17 18 } 19 } 20 const parent = { 21 template:` 22 <div> 23 <h3>儿子</h3> 24 <sun v-bind="$attrs" v-on="$listeners"></sun> 25 </div> 26 `, 27 components:{ 28 sun 29 } 30 } 31 32 new Vue({ 33 el: "#app", 34 data: { 35 data:'爷爷', 36 first:'爷爷的数据' 37 }, 38 components:{ 39 parent 40 }, 41 methods:{ 42 get(data){ 43 console.log(data); 44 } 45 } 46 }) 47 </script> 48 </body>
4，跨所有级别组件通信
---provide + inject---：可跨任意层级；
1 <body> 2 <div id="app"> 3 <h1>爷</h1> 4 <two></two> 5 </div> 6 <script src="../lib/vue.js"></script> 7 <script> 8 const one = { 9 inject:['pdata','pfn','pfn1'], 10 data(){ 11 return{ 12 log:'12345' 13 } 14 }, 15 template:` 16 <div> 17 <h3>孙</h3> 18 <p>{{pdata}}</p> 19 <button @click="pfn(log)">click</button> 20 <button @click="test">click1</button> 21 </div> 22 `, 23 methods:{ 24 test(){ 25 this.pfn1.get(1) 26 } 27 } 28 } 29 30 const two = { 31 inject:['pdata'], 32 template:` 33 <div> 34 <h2>儿</h2> 35 <p>{{pdata}}</p> 36 <one></one> 37 </div> 38 `, 39 components:{ 40 one 41 } 42 } 43 new Vue({ 44 el: "#app", 45 data: { 46 47 }, 48 provide:{ 49 pdata:'传递的数据', 50 pfn(v){ 51 console.log(v); 52 }, 53 pfn1:{ 54 get(v){ 55 console.log(v); 56 } 57 } 58 }, 59 components:{ 60 two 61 } 62 }) 63 </script> 64 </body>
二，同级组件通信（传值）
1，父传子，然后子在传给兄弟组件；
- 在定义好的 Vue 实例中，先父传子，然后再子传父；
- 在发送方利用 $emit(‘事件名’，数据) 来传递数据；
- 在接收方使用父传子的方法 v-on绑定 和 props 来接收数据；
2，事件总线；
- 通过新的Vue实例做中介，在子组件引入，再$emit出去，兄弟组件$on监听；
3，vuex
- new Vuex.Store，挂载到Vue.ues实例，子组件$store.state访问，改变时$store.commit出去，在store的mutation设置
