Vue组件间的传值——父子组件、非父子组件、组件跳转传值

一、父子组件之间的传值( props down, events up )

（1）父组件到子组件（通过props）

父组件：（在注册声明的子组件上加  :xxx  表示要传递到子组件的参数或方法）

<template>
    <div class="wrap">
        <!-- 要传递的参数和方法, 静态prop值直接添加占位符（name（数字除外，会转换成String）），动态prop通过v-bind（showSideBar、alert） -->
        <SideBar :showSideBar="showSideBar" :alert="alert" name="sideBar"></SideBar>
    </div>
</template>

<script>
    import SideBar from './sidebar.vue'
    export default {
        data () {
            return {
                showSideBar: true
            }
        },
        components: {
            SideBar: SideBar
        },
        methods: {
            alert: function () {
                alert(this.showSideBar)
            }
        }
    }
</script>

子组件：（通过props来接收父组件的传值）

<script>
    export default {
        // 通过props接收父组件的传值
        props: ['showSideBar', 'alert', 'name'],
        data () {
            return {

            }
        },
        mounted () {
            this.alert()    // 弹出true
            console.log(this.showSideBar, this.name)    // 控制台打印true sideBar
        }
    }
</script>

（2）子组件到父组件（通过 ref 或 emit）

• 方法一：

子组件中定义参数current，方法alert

父组件中（通过ref建立连接并获取子组件的传值）：

<template>
    <div class="wrap">
        <!-- 通过ref标识符建立连接 -->
        <SideBar ref="sidebar"></SideBar>
    </div>
</template>

<script>
    import SideBar from './sidebar.vue'
    export default {
        components: {
            SideBar: SideBar
        },
        mounted () {
            // 使用子组件方法及参数
            this.$refs.sidebar.alert()
            console.log(this.$refs.sidebar.current)
        }
    }
</script>

• 方法二

子组件（通过 emit 注册自定义事件）：

<template>
    <div class="title" @click="sendMsg">
    </div>
</template>

<script>
    export default {
        name: '',
        data () {
            return {
                current: 0,
                sliderIn: true
            }
        },
        methods: {
            sendMsg: function () {
                // 通过事件触发向上传递值或事件
                this.$emit('change', this.current, this.sliderIn, this.alert)
            },
            alert () {
                alert(111)
            }
        }
    }
</script>

父组件（通过v-on或@ 添加方法监听子组件的自定义事件）：

<template>
    <div class="wrap">
        <!-- 监听自定义事件并添加一个响应该事件的处理方法 -->
        <SideBar @change="handleMsg"></SideBar>
    </div>
</template>

<script>
    import SideBar from './sidebar.vue'
    export default {
        components: {
            SideBar: SideBar
        },
        methods: {
            handleMsg: function (cur, slider, alert) {
                console.log(cur, slider)    // 0 true
                alert()                     // 弹出111
            }
        }
    }
</script>

 

二、非父子组件之间传值（中央事件总线管理组件通信或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: '<App/>'
})

然后组件一中 ：

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()

 组件一：

<script>
    import bus from '../bus/bus.js'
    export default {
        data () {
            return {
                showUl: false
            }
        },
        methods: {
            showItem: function () {
                bus.$emit('showItem', true, this.showUl, this.alert)
            },
            alert () {
                alert(111)
            }
        }
    }
</script>

组件二

<script>
    import bus from '../bus/bus.js'
    export default {
        name: '',
        data () {
            return {
                sliderIn: false
            }
        },
        mounted () {
            var that = this
            bus.$on('showItem', function (msg, showUl, alert) {
                that.sliderIn = msg
                console.log(msg, showUl)
                alert()
            })
        }
    }
</script>

• 方法四

使用Vuex...(适用于大型项目较复杂情况)

三、页面跳转时传值

(1) query传值

<router-link tag="div" :to="{path: '/getInfo', query: {id: 1, age: 18, name: 'Jack'}}"></router-link>

获取值：

this.$route.query.id
this.$route.query.age
this.$route.query.name

注意：传值的时候会在url地址后面明码拼接所传的值，另外，在组件1中发送数据，到了组件2的url上才会拼接出来，所以，数据也只能在组件2中获取。 

(2) params传值

<router-link tag="div" :to="{path: '/getInfo', name: 'getInfo', params: {id: 1, age: 18, name: 'Jack'}}"></router-link>

获取值：

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