Vue组件通信(父传子、子传父、兄弟通信)

一.父组件传到子组件

父组件是通过props属性给子组件通信的

数据是单向流动的 父-->子  （子组件中修改props数据，是无效的会有一个红色警告）
在父组件的子组件标签上绑定一个自定义属性，用于绑定要传递的值，在子组件中使用prop属性进行数据的接受，可以直接使用，绑定的属性名和prop定义的名字必须一致，否则无法接受数据

• 子组件在props中创建一个属性，用以接收父组件传过来的值
• 父组件中注册子组件
• 在子组件标签中添加子组件props中创建的属性
• 把需要传给子组件的值赋给该属性

1 . 父组件代码如下：

​
​
<template>
   <div class="parent">
     <p>{{ msg }}</p>
     <son :fa-msg="msg"></son> <!-- 子组件绑定faMsg变量,注意驼峰-->
 </div>
 </template>
 <script>
 import son from './Son' //引入子组件
 export default {
   name: 'HelloWorld',
   data () {
     return {
       msg: '父组件',
     }
   },
   components:{son},
 }
 </script>

​

​

2 . 子组件接受代码如下：

<template>
  <div>
    <span v-for="(item, index) in articles" :key="index">{{item}}</span>
  </div>
</template>

<script>
export default {
  props: ['articles']
}
</script>

 

 

props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象可以是类型检测、自定义和设置默认值。

 第一种方法

props: ['list']

 第二种方法

​
props: {
    list: {
        type: String,
        default: 'sichaoyun'  //这里指定了一个默认值
    }
}

​

第三种方法

props: {

          list: String, //这里指定了字符串类型，如果类型不一致会警告的哦

}

 

二.子组件向父组件传值

通过绑定事件然后以this.$emit传值

通过自定义事件来实现
在子组件元素中绑定一个事件，点击触发事件，事件中使用emit(自定义事件，传递的值),向父组件发布信息，，事件名必须是emit中的事件名，自定义事件调用父组件自己定义的函数

vue2.0只允许单向数据传递，我们通过出发事件来改变组件的数据 

父组件代码如下:

父组件通过绑定自定义事件，接受子组件传递过来的参数 

​
<template>
  <div class="section">
    <com-article :articles="articleList" @onEmitIndex="onEmitIndex"></com-article>
    <p>{{currentIndex}}</p>
  </div>
</template>

<script>
import comArticle from './test/article.vue'
export default {
  name: 'HelloWorld',
  components: { comArticle },
  data() {
    return {
      currentIndex: -1,
      articleList: ['红楼梦', '西游记', '三国演义']
    }
  },
  methods: {
    onEmitIndex(idx) {
      this.currentIndex = idx
    }
  }
}
</script>
​

 子组件代码如下:

子组件通过$emit触发父组件上的自定义事件，发送参数

<template>
  <div>
    <div v-for="(item, index) in articles" :key="index" @click="emitIndex(index)">{{item}}</div>
  </div>
</template>

<script>
export default {
  props: ['articles'],
  methods: {
    emitIndex(index) {
      this.$emit('onEmitIndex', index)
    }
  }
}
</script>

​

3.兄弟组件传参 

假设你有两个Vue组件需要通信： A 和 B ，A组件按钮上面绑定了点击事件，发送一则消息，B组件接收。

定义一个eventBus.js文件，导出一个空的vue对象，在兄弟组件中引入bus.js的文件，在A组件通过bus.emit()传递，在B组件中的created函数中，使用bus.emit()传递，在B组件中的created函数中，使用bus.on接受

• eventBus 又称为事件总线，在vue中可以使用它来作为沟通桥梁的概念, 就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件， 所以组件都可以通知其他组件。
• eventBus也有不方便之处, 当项目较大,就容易造成难以维护的灾难

根组件如下:

<template>
  <div id="app">
    <ChildA/>
    <ChildB/>
  </div>
</template>

<script>
  import ChildA from './components/ChildA' // 导入A组件
  import ChildB from './components/ChildB' // 导入B组件

  export default {
    name: 'App',
    components: {ChildA, ChildB} // 注册A、B组件
  }
</script>

1. 初始化，全局创建$bus

直接在项目中的 main.js 初始化 $bus :

window.$bus=new Vue();

2. 发送事件

 通过$bus.$emit("aMsg", '来自A页面的消息');

<template>
  <div id="childA">
    <h1>我是A组件</h1>
    <button @click="transform">点我让B组件接收到数据</button>
    <p>因为你点了B，所以我的信息发生了变化：{{BMessage}}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        AMessage: 'Hello，B组件，我是A组件'
      }
    },
    computed: {
      BMessage() {
        // 这里存储从store里获取的B组件的数据
        return this.$store.state.BMsg
      }
    },
    methods: {
      transform() {
        // 触发receiveAMsg，将A组件的数据存放到store里去
        this.$store.commit('receiveAMsg', {
          AMsg: this.AMessage
        })
      }
    }
  }
</script>
​

4. 再B页面接收事件 

通过$bus.$on("事件名",callback)

​<template>
  <div id="childB">
    <h1>我是B组件</h1>
    <button @click="transform">点我让A组件接收到数据</button>
    <p>因为你点了A，所以我的信息发生了变化：{{AMessage}}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        BMessage: 'Hello，A组件，我是B组件'
      }
    },
    computed: {
      AMessage() {
        // 这里存储从store里获取的A组件的数据
        return this.$store.state.AMsg
      }
    },
    methods: {
      transform() {
        // 触发receiveBMsg，将B组件的数据存放到store里去
        this.$store.commit('receiveBMsg', {
          BMsg: this.BMessage
        })
      }
    }
  }
</script>
​

 持续更新中-.-