vue-组件通信

vue实现组件通信

父子组件：props：

在父组件对子组件上赋值，:vmodel指的是传给子组件的变量名，vmodel指的是data对象里面的vmodel属性值，可以写成一个对象的某个值，比如car.light等等

<children :vmodel="vmodel"></children>

然后在子组件中，通过设定props便可以直接引入该变量

<script>
  new Vue({
    el:"#app",
    props:["vmodel"],
    data(){
      return{
      }
    },
    methods:{}
  })
</script>

若传的是对象，则需在子组件这样引入

props:{
  vmodel:{
    type:Object,
    default:null
  }
}

如果是数组，则将type的值改成Array，default的值改成()=>[]即可

需要注意的是，子组件使用时不要对父组件传来的变量，即上文的vmodel进行值的修改。否则容易报错。当以对象的形式传的时候，是可以修改对象内的值的，但是不太建议这么做。可以使用其他方式来实现子组件对父组件传值。

事件总线

组件通信还可以使用事件总线来实现
事件总线的主要流程如下：

首先在子组件对要传的值或者form内容进行监听

watch:{
  a:{
    handler(val){
      this.$EventBus.$emit（”自定义事件名”,val）
    }
  }
}

之后在父组件的created函数里面相应设置

created()｛
  this.$EventBus.$on("自定义的事件名",(val)=>{
    //具体操作
  })
｝
beforeDestroy(){
  this.$EventBus.$off("自定义事件名")
}

为避免事件总线一直开启，因此记得在beforeDestroy钩子函数内设置关闭

组件通信其他内容后续补充