vue中的组件传参

传参

1.vue的父子传参

父传递参数

<Son name='xiaoma' :age="18" />

子组件

<script>
export default {
 props: ['name', 'age'],
 // 或者 规定类型写法
 props: { name: {type: String}, age:{type: Number} }
}
</script>

2.vue的子父传参

子组件

<button v-on:click="$emit('show','hello 马先生')">按钮</button>

父组件

<son @show="nihao"/>


<script>
import Son from "../components/Son.vue"
  export default {
    components:{ Son },
    methods: {
      nihao(msg) {
        console.log(msg);
      }
    },
  }
</script>

流程解析：

子组件中, 点击按钮. $emit(事件名, 参数) 触发 show 事件绑定的方法, 传入参数.

show 方法在 父组件中定义. @show=“sayHi” , 子的 show 方法绑定了 父的 sayHi

子中的参数通过 show 事件绑定的 sayHi 方法传入父中

vue的兄弟传参

首先你要明白兄弟组件间无法直接通信, 通信方式有两种: 子传父 + 父传子 和 事件车

子传父 + 父传子: 此方式效率较低, 不推荐

依赖共同的父组件进行信息的转达.

假设 A 和 B 组件为兄弟组件, A 要向 B 中传值:

父组件 通过 A 的事件方式传递 父的函数给A

A组件 通过 $emit() 方式 触发父传入的事件, 并传入参数

父组件 收到A 的参数之后, 再通过修改 传递给 B组件 的属性. 实现B的属性修改

总结

父和A组件, 通过子父传参进行信息交互.

父和B组件, 通过父子传参进行信息的交互.

事件车: 此方式效率高, 推荐使用.

示例参考：Vue 事件车_爱学习的小发发的博客-优快云博客_vue事件车

向 Vue 的原型中, 注入一个 专门负责监听事件的 Vue 实例 main.js

 Vue.prototype.EventBus = new Vue();

A 组件中注册 引入 EventBus.js 模块, 并向其中注册 事件

 this.EventBus.$emit('change', msg)

B 组件中注册 change 事件的监听

this.EventBus.$on('change', changeMsg(msg))
methods:{
	changeMsg(msg){
	//此处能收到 msg ,A组件传入的值
	}
}

兄弟传参eventbus具体详见