Vue组件间的传值——父子组件、非父子组件、组件跳转传值
一、父子组件之间的传值( props down, events up )
（1）父组件到子组件（通过props）
父组件：（在注册声明的子组件上加 :xxx 表示要传递到子组件的参数或方法）
子组件：（通过props来接收父组件的传值）
（2）子组件到父组件（通过 ref 或 emit）
- 方法一：
子组件中定义参数current，方法alert
父组件中（通过ref建立连接并获取子组件的传值）：
- 方法二
子组件（通过 emit 注册自定义事件）：
父组件（通过v-on或@ 添加方法监听子组件的自定义事件）：
二、非父子组件之间传值（中央事件总线管理组件通信或vuex）
注： 前三种方法基本思路是一样的，都是用一个Vue实例来作为中央事件总线来管理组件通信，适用于通信需求简单的情形
- 方法一
main.js中
// Vue原型上添加bus对象，实现全局的事件总线对象
Vue.prototype.bus = new Vue()然后组件一中：
sendMsg () {
// 发送数据
this.bus.$emit('change', this.current, this.sliderIn, this.alert)
}组件二中：
mounted () {
// 用$on监听事件并接收数据
this.bus.$on('change', function (current, sliderIn, alert) {
console.log(current, sliderIn)
alert()
})
}- 方法二
main.js中：
new Vue({
el: '#app',
data: {
bus: new Vue()
},
router,
components: { App },
template: '然后组件一中 ：
sendMsg () {
// 通过vue实例上的事件总线发送数据
this.$root.bus.$emit('change', this.current, this.sliderIn, this.alert)
}组件二中：
mounted () {
// 用$on监听事件并接收数据
this.$root.bus.$on('change', function (current, sliderIn, alert) {
console.log(current, sliderIn)
alert()
})
}- 方法三
新建一个bus.js文件
import Vue from 'vue'
export default new Vue()
组件一：
组件二
- 方法四
使用Vuex...(适用于大型项目较复杂情况)
三、页面跳转时传值
(1) query传值
获取值：
this.$route.query.id
this.$route.query.age
this.$route.query.name注意：传值的时候会在url地址后面明码拼接所传的值，另外，在组件1中发送数据，到了组件2的url上才会拼接出来，所以，数据也只能在组件2中获取。
(2) params传值
获取值：
this.$route.params.id
this.$route.params.age
this.$route.params.name注意：params有一个name属性，对应的是你需要传过去的那个组件在路由中定义的name名，必须一致。
参考文章： https://blog.csdn.net/wxl1555/article/details/84646832
https://blog.csdn.net/a15088712506/article/details/78967937