一文读懂 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>

使用