Vue的非父子组件传值

最新推荐文章于 2025-06-17 10:37:35 发布

温清夜

最新推荐文章于 2025-06-17 10:37:35 发布

阅读量274

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： Vue

本文链接：https://blog.youkuaiyun.com/qq_37288477/article/details/86632503

Vue 专栏收录该内容

3 篇文章

订阅专栏

解决方案BUS总线/发布订阅

代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>非父子组件的传值</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <child content="范飞飞"></child>
        <child content="温清夜"></child>
    </div>
    <script>
        Vue.prototype.bus = new Vue()

        Vue.component('child', {
            props: ['content'],
            data: function() {
                return {
                    number: this.content
                }
            },
            template: '<div @click="handClick">{{number}}</div>',
            methods: {
                handClick: function() {
                    this.bus.$emit('change', this.number)
                }
            },
            mounted() {
                let this_ = this
                this.bus.$on('change', function(msg) {
                    this_.number = msg
                })
            },
        })

        let vm = new Vue({
            el: '#app'
        })
    </script>
</body>

</html>

首先在Vue的原型上添加bus事件