vue中的五种组件传值

最新推荐文章于 2021-10-31 17:23:28 发布

帅奇

最新推荐文章于 2021-10-31 17:23:28 发布

阅读量340

点赞数

文章标签： vue Vuex

本文链接：https://blog.csdn.net/ssqwdddw/article/details/107167493

版权

本文详细介绍了Vue中五种组件间的数据传递方式：1) 父组件通过属性绑定向子组件传值，子组件通过props接收；2) 子组件通过this.$emit触发自定义事件传值给父组件；3) 兄弟组件间利用事件中心或中间件组件进行通信；4) 跨组件的复杂数据传递；5) 使用Vuex状态管理库进行全局状态管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

组件传值

1 父传子
父亲怎么传：通过属性绑定形式传
儿子怎么接收：通过props来接收
2.子传父
子怎么传：通过this. $e m i t 触发一个自定义事件，并且发送一个值父怎么接收：通过定义自定义事件的事件函数的形参来接收 3 . 兄弟组件传值定义一个事件中心，或者是第三方接收值的组件：通过该事件中心的$ on来定义自定义事件的事件函数来接收值

eventBus.$on('getTab1',(data)=>{
  console.log('接收tab1传递的值',data)
})

另一个兄弟组件怎么传：通过事件中心的$emit触发对应的刀了 on的事件，并且把值传递过去

eventBus.$emit('getTab1',this.num)

4.跨组件传值

Vue.component('my-sub1',{
      template:'#my-sub1',
      data() {
        return {
          money: 10000000
        }
      },
      provide:{
        money:1000
      },
      components:{
        'sub-a':{
          template:'<div>子组件<sub-b></sub-b></div>',
          components:{
            'sub-b':{
              template:'<div>子组件{{money}}</div>',
              inject:['money']
            }
          }
        }
      }
    })
    new Vue({
      el: '#app'
    })

5.vuex里面的state里面定义