Vue组件间通信方式总结

父子组件通信方式

父 => 子(props)

  • 在父组件中的子组件中,把相应的数据携带上
  • 子组件中通过props:[‘’]进行接收
  • 注意点: props只可以从上一级组件传递到下一级组件(父子组件),即所谓的单向数据流。而且props是只读的,不可被修改,所有的修改都会失效并警告

子 => 父($emit)

  • 对于$emit 的理解: $emit绑定一个自定义事件, 当这个语句被执行时, 就会将参数arg传递给父组件,父组件通过v-on监听并接收参数。
  • 在子组件中
this.$emit('事件名', args)
  • 在父组件中的子组件中,直接通过@事件名进行接受,并且在vue实例中对事件方法进行相关操作