组件间的数据传递

父传子

  • 父通过属性方式传递,子通过props属性接收
<Step :num="5"></Step>
props:{type:Number,default:1}

子传父

  • 子通过发送事件
this.$emit('numchange',this.count)
  • 父通过监听事件,$event为事件传递的参数
<Step @numchange="$event"></Step>

全局传递(非父子关系)

  1. 空vue事件方法传递$on $emit
  • bus.js 事件总线
import Vue from 'vue';
export default new Vue();
  • Btn.vue
import Bus from 'xxx/bus.js'
Bus.$emit('colorchange','red')
  • Color.vue
import Bus from 'xxx/bus.js'
created(){
    Bus.$on("colorchange",$event=>{//})
}
  1. cookie localStorege sessionStorage
  2. vuex

路由页面参数

  • params 参数
  • query 查询

猜你喜欢

转载自blog.csdn.net/LWH8011/article/details/107057205