Vue兄弟组件、父子组件通信、事件调用

1.兄弟组件通信:

创建新的vue实例bus.js

//bus.js

import Vue from 'vue'
export default new Vue

组件A:

import Bus from 'bus.js'
Bus.$emit('name', something) //name按照我自己的理解就是一个连接的作用 连接着$on 两者要保持一致(如果理解有误一定请指正)something就是你要传递的参数

组件B:

import Bus from 'bus.js'
Bus.$on('name', something) //something是接收的参数 可以赋值到你想要的地方

2.父子组件通信:

   2.1 父-->子

父组件中通过router-view渲染子组件,或者在父组件中引用子组件都行,我的例子是通过router-view渲染的,父组件:

<router-view ref="event" :form-data="msg"></router-view> //router-view上绑定form-data 注意这里使用-代替驼峰写法 msg是传递的数据
// js
export default {
  data () {
    msg: 'i am a message'
  }
}

这里就是一个传递的过程,将需要传递的数据绑定在子组件上

子组件:

// js

export default{
  props:['formData'], //这里通过 props接收传递过来的数据 这样就完成了父组件到子组件的数据传递
  mounted () {
    console.log(this.formData)
  }
}

3.父组件触发子组件的自定义事件

在2.1的router-view中有这么个属性ref=“event”,我们可以在父组件中通过$refs来调用子组件中的方法写法如下:

export default {
  methods: {
    click () {
        this.$refs.event.getSomething()
    }
  }
}

getSomthing就是子组件中的方法,这里需要注意的是,如果你的子组件循环出来的,调用的使用要用index获取对应的值,例如:this.$refs.event[index].getSomething()

4.子组件触发父组件状态改变

场景描述:A组件(父)中点击按钮改变serverStatus的状态控制提示框(子组件B)显示,在B组件中点击关闭按钮触发父组件中serverStatus的值关闭提示框

// A组件
<div class="mask" v-show="serverStatus">
    <server @close="serverStatus = false"></server>
</div>
// B组件
<span class="x" @click="close"></span>

export default {
  methods: {
    close () {
      this.$emit('close', false)
    }
  }
}
在B组件中定义点击事件close并通过$emit触发,在A组件中监听close事件后改变serverStatus的值,需要注意的是A组件中的监听 必须要绑定在子组件上才能成功监听


未完待续,本文若有错误的地方还请大家指正

欢迎转载,但请注明出处





评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值