组件之间的通信方式 - 图1

1. 父子组件传值

1.1 props

父组件可以把子级的属性和方法传给子组件， 子组件需要在props里面接收， 即可使用。props可以是数组类型， 也可以是对象类型。 :::success //父组件

//子组件
props:{
parentData:[‘parentData’,’getData’]
}, :::

  1. //父组件
  2. <template>
  3.   <div class="parent" >
  4.     <h2>我是父组件</h2>
  5.     <h2>姓名：{{parentData.name}}</h2>
  6.     <h2>年龄：{{parentData.age}}</h2>
  7.     <my-child :parentData="parentData" :getData="getData"></my-child>
  8.   </div>
  9. </template>
  11. <script>
  12. import MyChild from './MyChild.vue'
  13. export default {
  14.   components: {
  15.     MyChild,
  16.   },
  17.   data() {
  18.     return {
  19.       parentData: {
  20.         name: '我是父组件',
  21.         age:'60'
  22.       },
  23.       getData(){
  24.         console.log('我是父组件的getData方法')
  25.       }
  26.     }
  27.   },
  28. }
  29. </script>
  32. //子组件
  33. <template>
  34.   <div class="child">
  35.     <h2>我是子元素</h2>
  36.     <h3>姓名：{{child.name}}</h3>
  37.     <h3>年龄：{{child.age}}</h3>
  38.     <button @click="getDataByParent">通过$parent获取父组件数据</button>
  39.     <button @click="getData">通ss</button>
  40.     <my-son v-bind="$attrs"></my-son>
  41.   </div>
  42. </template>
  44. <script>
  45. import MySon from './MySon.vue'
  46. export default {
  47.   components: {
  48.     MySon,
  49.   },
  50.   props:{
  51.     parentData:{
  52.       type:Object,
  53.       required: true,
  54.        default: function() {
  55.         return { name:'我是默认值', age:20 };
  56.       }
  57.     },
  58.     getData:{
  59.       type:Function
  60.     }
  61.   },
  62.   data() {
  63.     return {
  64.       child: {
  65.         name: '我是child组件',
  66.         age: 45,
  67.       },
  68.     }
  69.   },
  70.   methods: {
  71.     getDataByParent() {
  72.       console.log(this.parentData)
  73.     },
  74.   },
  75. }
  76. </script>

1.2 $emit

子组件可以通过this.$emit把子级的数据给父组件。 :::success //父组件

//子组件
getDataByParent() {
this.$emit(‘sendMsg’,’我是子组件’)
}, :::

  1. <template>
  2.   <div class="parent" >
  3.     <h2>我是父组件</h2>
  4.     <h2>姓名：{{parentData.name}}</h2>
  5.     <h2>年龄：{{parentData.age}}</h2>
  6.     <my-child @sendMsg = 'sendMsg'></my-child>
  7.   </div>
  8. </template>
  10. <script>
  11. import MyChild from './MyChild.vue'
  12. export default {
  13.   components: {
  14.     MyChild,
  15.   },
  16.   data() {
  17.     return {
  18.       parentData: {
  19.         name: '我是父组件',
  20.         age:'60'
  21.       },
  22.       getData(){
  23.         console.log('我是父组件的getData方法')
  24.       }
  25.     }
  26.   },
  27.   methods:{
  28.     sendMsg(val){
  29.       console.log(val)
  30.     }
  31.   }
  32. }
  33. </script>
  35. //子组件
  36. <template>
  37.   <div class="child">
  38.     <h2>我是子元素</h2>
  39.     <h3>姓名：{{child.name}}</h3>
  40.     <h3>年龄：{{child.age}}</h3>
  41.     <button @click="getDataByParent">send</button>
  42.     <my-son v-bind="$attrs"></my-son>
  43.   </div>
  44. </template>
  46. <script>
  47. import MySon from './MySon.vue'
  48. export default {
  49.   components: {
  50.     MySon,
  51.   },
  52.   data() {
  53.     return {
  54.       child: {
  55.         name: '我是child组件',
  56.         age: 45,
  57.       },
  58.     }
  59.   },
  60.   methods: {
  61.     getDataByParent() {
  62.      this.$emit('sendMsg','我是子组件')
  63.     },
  64.   },
  65. }
  66. </script>

1.3 $parent

子组件通过this.$parent获取父组件的属性和方法 :::success this.$parent.parentData //获取父组件的属性
this.$parent.getData() //调用父组件的方法 :::

  1. //parent组件
  2. <template>
  3.   <div class="parent" ref='parentEle'>
  4.     <h2>我是父组件</h2>
  5.     <h2>姓名：{{parentData.name}}</h2>
  6.     <h2>年龄：{{parentData.age}}</h2>
  7.     <my-child></my-child>
  8.   </div>
  9. </template>
  11. <script>
  12. import MyChild from './MyChild.vue'
  13. export default {
  14.   components: {
  15.     MyChild,
  16.   },
  17.   data() {
  18.     return {
  19.       parentData: {
  20.         name: '我是父组件',
  21.         age:'60'
  22.       },
  23.     }
  24.   },
  25. }
  26. </script>
  28. //child组件
  29. <template>
  30.   <div class="child">
  31.     <h2>我是子元素</h2>
  32.     <h3>姓名：{{child.name}}</h3>
  33.     <h3>年龄：{{child.age}}</h3>
  34.     <button @click="getDataByParent">通过$parent获取父组件数据</button>
  35.     <my-son v-bind="$attrs"></my-son>
  36.   </div>
  37. </template>
  39. <script>
  40. import MySon from './MySon.vue'
  41. export default {
  42.   components: {
  43.     MySon,
  44.   },
  45.   data() {
  46.     return {
  47.       child: {
  48.         name: '我是child组件',
  49.         age: 45,
  50.       },
  51.     }
  52.   },
  53.   methods: {
  54.     getDataByParent() {
  55.       console.log(this.$parent.parentData) //获取父组件的属性
  56.       console.log(this.$parent.getData()) //调用父组件的方法
  57.     },
  58.   },
  59. }
  60. </script>

1.4 $refs

可以通过this.$refs获取子组件的属性和方法. :::success
console.log(this.$refs.childEle.child) //获取子组件的属性
console.log(this.$refs.childEle.change())//获取子组件的方法 :::

  1. <template>
  2.   <div class="parent" >
  3.     <h2>我是父组件</h2>
  4.     <h2>姓名：{{parentData.name}}</h2>
  5.     <h2>年龄：{{parentData.age}}</h2>
  6.     <button @click="getData">通过ref获取子组件的数据</button>
  7.     <my-child ref='childEle'></my-child>
  8.   </div>
  9. </template>
  11. <script>
  12. import MyChild from './MyChild.vue'
  13. export default {
  14.   components: {
  15.     MyChild,
  16.   },
  17.   data() {
  18.     return {
  19.       parentData: {
  20.         name: '我是父组件',
  21.         age:'60'
  22.       }
  23.     }
  24.   },
  25.   methods:{
  26.     getData(){
  27.       console.log(this.$refs.childEle.child) //获取子组件的属性
  28.       console.log(this.$refs.childEle.change())//获取子组件的方法
  29.     }
  30.   }
  31. }
  32. </script>

1.5 $attrs

首先我们有三个组件A-B-C，然后想A中的属性传入C中，基本的做法是这样的，一层一层通过 props 往下传递。
ComponentB 组件中并没有使用到父组件传递过来的属性 msg，但是这样写就是想把属性再传递给ComponentC，那么除了这种写法还可以给ComponentC绑定$attrs属性。

  1. <component-c v-bind="$attrs"></component-c>

1.6 $children

this.$children可以获取子组件的方法和属性。
在父组件中打印this.$children。里面包含了所有子组件：
image.png

  1. <template>
  2.   <div class="parent">
  3.     <h2>我是父组件</h2>
  4.     <h2>姓名：{{parentData.name}}</h2>
  5.     <h2>年龄：{{parentData.age}}</h2>
  6.     <button>通过ref获取子组件的数据</button>
  7.     <my-child :parentData="parentData"></my-child>
  8.   </div>
  9. </template>
  11. <script>
  12. import MyChild from './MyChild.vue'
  13. export default {
  14.   components: {
  15.     MyChild,
  16.   },
  17.   data() {
  18.     return {
  19.       parentData: {
  20.         name: '我是父组件',
  21.         age: '60',
  22.       },
  23.     }
  24.   },
  25.   mounted() {
  26.     console.log(this.$children[0].child)
  27.     console.log(this.$children[0].getData())
  28.   },
  29. }
  30. </script>

2. 兄弟组件传值

2.1 bus事件总线

通过this.$emit和this.$on。this.$emit触发当前实例上的事件， 并将参数传递给监听器， 通过this.$on监听当前实例上的自定义事件。 :::success 简单理解为一个托管平台， 这个平台必须独立于关联两个组件之外的vue实例， 当2个组件需要传递数据的时候， 发起方在平台上触发一个this.$emit然后传递参数， 接收方在平台设置一个监听this.$on接收参数并执行方法， 方法的参数就是发送方传递过来的参数。 :::

  1. //main.js
  2. import Vue from 'vue'
  3. import App from './App.vue'
  4. import ElementUI from 'element-ui';
  5. import Directives from './directives/index'
  6. import 'element-ui/lib/theme-chalk/index.css';
  7. import store from './store'
  9. Vue.use(Directives)
  10. Vue.config.productionTip = false;
  11. Vue.use(ElementUI);
  12. const vm = new Vue({
  13.   render: h => h(App),
  14.   store,
  15.   beforeCreate(){
  16.     Vue.prototype.$bus = this;
  17.   }
  18. }).$mount('#app')
  19. console.log(vm)
  21. //发送方
  22.  this.bus.$emit('send', this.child1)
  24. //接收方
  25.  this.bus.$on('send', (value) => {
  26.    this.child1 = value
  27.  })
  1. //兄弟一
  2. <template>
  3.   <div class="child">
  4.     <h2>我是子元素</h2>
  5.     <h3>姓名：{{child1.name}}</h3>
  6.     <h3>年龄：{{child1.age}}</h3>
  7.     <button @click="sendData">给兄弟组件传值</button>
  8.     <hr>
  10.   </div>
  11. </template>
  13. <script>
  14. export default {
  16.   data() {
  17.     return {
  18.       child1: {
  19.         name: '我是child1111组件',
  20.         age: 45,
  21.       },
  23.     }
  24.   },
  25.   methods:{
  26.     sendData(){
  27.       this.bus.$emit('send', this.child1)
  28.     }
  29.   }
  30. }
  31. </script>
  33. <style>
  34.   .child {
  35.     padding: 20px;
  36.     background: green;
  37.   }
  38. </style>
  40. //兄弟2
  41. <template>
  42.   <div class="child2">
  43.     <h2>我是子元素</h2>
  44.     <h3>姓名：{{child2.name}}</h3>
  45.     <h3>年龄：{{child2.age}}</h3>
  46.      <p>下面是兄弟组件传过来的值</p>
  47.     <h2>{{child1.name}}</h2>
  48.     <h2>{{child1.age}}</h2>
  49.   </div>
  50. </template>
  52. <script>
  53. export default {
  54.   data() {
  55.     return {
  56.       child2: {
  57.         name: '我是child组件22222',
  58.         age: 45,
  59.       },
  60.       child1:{}
  61.     }
  62.   },
  63.   methods:{
  64.   },
  65.   mounted(){
  66.     console.log(1231321)
  67.     // this.bus.$on('send', this.getData)
  68.      this.bus.$on('send', (value) => {
  69.       this.child1 = value
  70.      })
  71.   }
  72. }
  73. </script>
  75. <style>
  76.   .child2 {
  77.     padding: 20px;
  78.     background: rgb(32, 68, 230);
  79.   }
  80. </style>

image.png