Vue 兄弟组件（子组件与子组件间通信）间通信，$on方法失效问题，以及父子组件间通信

**

兄弟组件间通信

**
流程图

传递数据的组件中

//通过 $ emit传递，第一个参数是名字 ，第二个是数据

methods: {   
 handleCurrentChange(event) {   
    console.log(event);    
      bus.$emit('pagenum', event); 
         }  }

接受数据的兄弟组件
//兄弟组件通过 $ on监听 第一参数是名字，

created() {    
bus.$on('pagenum', pagenum =>{  
    .............     
     });
          }

子组件向父组件通信

流程图

父组件
@datalist 子组件传递的事件名，keyWordSearch为绑定的事件

methods: {
    keyWordSearch(data) {
      this.result = data;
      this.flag = false;
    }
  }

子组件
通过$ emit传递数据，第一个参数：绑定的事件名，第二参数为数据

 methods: {      
  sumitKeyWord() {    
         ...........             
            this.$emit('datalist', this.datalist);     
                    ............
                       };

父组件向子组件通信

流程图

父组件
将自己实例的数据在子组件通过 v-model绑定

<template>
<SearchTable :result = 'result'/>
</template>

<script>
data() {
    return {
      result: {},
    };
  }
  </script>

子组件
子组件通过props接收数据,就可以直接使用了渲染页面了

<template>
.......
<span class="page-tipes" >共为你找到 {{result.total}} 条数据</span>
........
<template>
<script>
export default{ 
name: 'SearchTable',  
props: ['result']
}
</script>

关于vue中子组件修改父组件传递过来的值

有时操控子组件去修改父组件传递过来的值是避免不了的，但是在vue中所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来简单类型数据则不行，引用类型不改变引用地址可以。防止从子组件意外改变父级组件的状态