一文读懂 Vue 组件通信 同级组件、兄弟组件、父子组件、子父组件 通信 实例（详解）

Vue 组件通信

文章概览

父子组件 通信
子父组件 通信
同级组件 通信
兄弟组件 通信

1. 父子组件通信

使用 props 通信

单项父组件向子组件通信

parent

<template>
  <div id="app">
    <v-child info="message"></v-child>
  </div>
</template>

<script>

import Child from './components/Child'

export default {
  components:{
    'v-child':Child
  },
  data(){
    return{
      message:''
    }
  }
}
</script>  

children

<template>
  <div>{{info}}</div>
</template>

<script>

export default {
  props:['info']
}

</script>

使用 $children $parent 通信

$children 获取的是组件集合

$parent 属性可以用来从一个子组件访问父组件的实例。它提供了一种机会，可以在后期随时触达父级组件，以替代将数据以 prop 的方式传入子组件的方式

parent

<template>
  <div id="app">
 		<childrent></childrent>
      <input type='text' v-model='parentmessage' @change="sendtochildrenmessage"></input>
  </div>
</template>

<script>

import childrent from './components/childrent'

export default { 
components:{
  childrent
 },
  data(){
    return{
      parentmessage:''
    }
  },
  method:{
	sendtochildrenmessage(){
	//单个子组件
 	this.$children.childrenmessage=this.parentmessage
 	//多个子组件注意顺序
 	//this.$children[1].chidrenmessage=this.parentmessage
 }
}
}
</script>  

children

<template>
<!--接收父组件传递信息-->
  <div>{{this.childrenmessage}}</div>
  <!--获取父组件信息->
<div>{{this.$parent.parentmessage}}</div> 
</template>

<script>

export default {
  data(){
		 return{
		 childrenmessage:'',
		 }
	 }
}

</script>

子父组件通信

使用 $refs 通信 $refs指定被引用子组件 为子组件赋予一个 ID

parent

<template>
  <div id="app">
  		<!--ref 标记引用->
 		<childrent ref=“children‘></childrent>
      <input type='text' v-model='parentmessage' @change="sendtochildrenmessage"></input>
  </div>
</template>

<script>

import childrent from './components/childrent'

export default { 
components:{
  childrent
 },
  data(){
    return{
      parentmessage:''
    }
  },
  method:{
	sendtochildrenmessage(){
	//当前引用 子组件  方法名 （参数）
 	this.$refs.children.getparentmessage(this.parentmessage)
 }
}
}
</script>  

children

<template>
<!--接收父组件传递信息-->
  <div>{{this.childrenmessage}}</div> 
  
</template>

<script>

export default {
  data(){
		 return{
		 childrenmessage:'',
		 }
	 },
	 method:{
 	getparentmessage(data){
 	//获取父组件传递数据
    this.childrentmessage=data
 }
 }
}

</script>

同级组件通信

$emit 它可以被 v-on 侦听 程序化的侦听器 同时使用不同的 组件，每个新的实例都程序化地在后期清理它自己

创建通信 文件 bus.js

import Vue from 'vue'

export default new Vue()

同级组件一

<template>
  <div id="app">
    <!--传递值给同级组件->
    <input type='text' v-model='message' @change="sendmessage"></input>
  </div>
</template>

<script>

//导入通信桥梁
  import bus from '../../config/bus'

  export default {
    data () {
      return {
        message: ''
      }
      method:{
        sendmessage()
        {
          //$emit( eventName, […args] )发射方法名  方法参数
          bus.$emit('message', this.message)
        }
      }
    }
    
</script>

同级组件二

<template>
  <div id="app">
     //接收同级组件信息
    <input type='text' v-model='message'  ></input>
  </div>
</template>
<script>
//导入通信桥梁
  import bus from '../../config/bus'

  export default {
    data () {
      return {
        message: ''
      }
      method:{
        sendmessage()
        {
          //$on( eventName, […args] )接收方法名  方法参数
          bus.$on('message', (data)=>{
				this.message=data
			})
        }
      }
    }
</script>