vue框架中子组件与父组件之间的通信

Date2021-06-09 By WJB

Vue框架中强调单向数据流。对于 Vue 来说，组件之间的数据传递具有单向数据流这样的特性。
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子 组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。
额外的，每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为 最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做 了，Vue 会在浏览器的控制台中发出警告。

那么如何显示子组件向父组件发送数据呢？答案：事件（event）；

子组件 item.vue，通过 this.$emit("active",'params');发送向父组件发送信号， active是自定义事件的名称，可以根据需要自己定义；params 是传递的参数可以自己定义。

<template>
  <div class="item" :class="{ active: isActive }"  @click="handleClick">
    <!-- 插槽 -->
    <slot></slot>
  </div>
</template>

<script>
export default {
  props:{
      isActive:{
          type:Boolean,   //限制属性类型
          required:true, //约束该属性必须传递
          default: true,//默认属性
      },
  },
   methods: {
        handleClick(){
          // active是自定义事件的名称，可以根据需要自己定义
          // params 是传递的参数可以自己定义
          // this.$emit() 事件信号发送 通知父组件
          this.$emit("active",'params'); 
        },
      },
}
</script>
/*scoped 表示局部，解决样式冲突*/
<style scoped>
.active{
    background:#e7e7e7;
}
.item{
    cursor: pointer;
    width: 100%;
    height: 100%;
    transition:0.5s;
}
.item:hover{
  background: #f4f4f4;
}
</style>

父组件 app.vue，父组件要注册事件接收子组件通知，注册方式与常规事件一样 @+事件名称，及代码中 @active="curActive='dongman'" 语句。

<template>
<div>
 <div style="width:100px; height:50px; border:2px solid" >
   <!--active 子父组件自定义事件，子组件 发送信号后 即可执行“curActive='dongman”，这句代码
    也可以调用事件-->
    <Item :isActive="curActive==='dongman'" @active="curActive='dongman'" >
      动漫
    </Item>
 </div>
 <div style="width:100px; height:50px; border:2px solid" >
    <Item :isActive="curActive==='dianying'"  @active="curActive='dianying'" >
      电影
    </Item>
  </div>
</div>
 
</template>
<script>
import Item from './components/item'
export default{
  components:{
    Item,
  },
  data()
  {
     return{
       curActive:"dongman"
     }
  },
}

</script>

获取源码地址：

源码说明，需要安装node，vue ，npm；源码中没有带带三方依赖库，所以要在当前文件夹执行 npm install 命令。