组件传值:父子$emit,props.兄弟$bus.$on.$emit,

目录

1.父子传值

2.子给父传值

3.兄弟之间传值.

---

1.父子传值

父传子通过事件绑定.在父结构上的子标签能添加

//子组件的标签  <  :需要传递的名字='父组件需要传递的值'  >

子组件通过props接收

export default {
   props:['父定义的名字']
}

2.子给父传值

通过事件绑定的方式

在子组件中定义

methods:{
     事件名(){
    this.$emit('这里是自定义的任何名字用于传给父组件接收',参数可填可不填.根据情况而定)
    }
  }

父组件

//在父结构里的对应的子组件标签中  <  @子组件自定义的名字="父组件可自定义的名字" >
//如果子组件有参数.自定义接收参数.

比如:

    @子组件的定义的名字="fn"

然后在父组件中的methods: 定义

methods: {
   fn(){
  }
}

3.兄弟之间传值.

方法1.

// 第一步
// 将bus挂载在原型上.都可以使用了.
Vue.prototype.$bus = new Vue()



this.$bus.$on('自定义名',(参数...)=>{})监听

this.$bus.$emit('自定义名',参数...)触发

this.$bus.$off('对应自定义名',参数...)销毁

方法2. 

通过vuex中的state

一般在多个组件需要使用同一个数据的时候可以使用vuex的方法.