Vue.js 父子组件及非父子组件间实现通讯

1. 父组件与子组件通讯

父组件
父组件与子组件通讯-父组件.pngvue

子组件经过props来接收数据:
格式1:spa

props: ['childMsg']

格式2 :code

props: {
    childMsg: Array //指定传入的类型
}

格式3:事件

props: {
    childMsg: {
        type: Array,
        default: [0,0,0] //指定默认的值
    }
}

2.子组件与父组件通讯

在vue中是不容许子组件直接修改父组件的值,在vue中只容许单向数据传递rem

子组件:
子组件与父组件通讯-子组件.pngit

父组件:
子组件与父组件通讯-父组件.pngclass

PS
vue2.3能够使用.sync修饰符进行子组件改变props值(注意这里是改变。想使用props值的话经过computed进行处理)组件通信

3.非父子组件间通讯

建立事件中心
busJs.pngim

组件1触发:
HiVue.png通信

组件2接收:
hellloVue.png

相关文章
相关标签/搜索