Vue事件总线、ref、.sync语法糖、$nextTick、axios基本写法

事件总线实现兄弟组件之间通信

1、在vue的原型上添加属性 $bus,值为一个vue实例化对象

// main.js
Vue.prototype.$bus = new Vue()

2、发送数据的组件通过 this.

b

u

s

.

bus.

bus.emit('event',value) 发送数据

<script>
export default {
    data(){
        return {
            msg1:'ChildA组件传给兄弟组件ChildB的值',
        }
    },
    methods:{
        send(){
            this.$bus.$emit('childv',this.msg1)
        }
    }
}
</script>

3、在需要接收数据的组件的created生命周期函数通过 this.

b

u

s

.

bus.

bus.on('event',(val)=>{}) 监听，在回调函数中进行数据更改，第一个参数‘event’须与发送数据的组件中自定义的事件名称保持一致

<script>
export default {
    data(){
        return {
            msg:''
        }
    },
    created(){
        this.$bus.$on('childv',(val)=>{
            this.msg = val
        })
    }
}
</script>
<