非父子组件之间的传值

最新推荐文章于 2023-04-14 19:43:56 发布

战南城

最新推荐文章于 2023-04-14 19:43:56 发布

阅读量113

点赞数

分类专栏： Vue 个人笔记，不喜勿喷！！文章标签： vue

本文链接：https://blog.csdn.net/qq_29948297/article/details/111631117

版权

个人笔记，不喜勿喷！！同时被 2 个专栏收录

329 篇文章 2 订阅

订阅专栏

Vue

24 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>非父子组件间的传值(Bus/总线/发布订阅模式/观察者模式)</title>
    <script src="./vue.js"></script>
    <style>
        .actived {
            color: red;
        }
    </style>
</head>
<body>

<!-- 非父子组件之间的传值 也可以使用vuex -->

    <div id="app">
        <child content="Dell"></child>
        <child content="Lee"></child>
    </div>
    <script>

        Vue.prototype.bus = new Vue()

        Vue.component('child', {
            data: function() {
                return {
                    selfCount: this.content
                }
            },
            props:{
                content: String
            },
            template: '<div @click="handleClick">{{selfCount}}</div>',
            methods: {
                handleClick: function() {
                    this.bus.$emit('change', this.selfCount)
                }
            },
            mounted: function() {
                var this_ = this
                this.bus.$on('change', function(msg) {
                    this_.selfCount = msg
                })
            }
        })

        var vm = new Vue({
            el: "#app", 
        })
    </script>


</body>
</html>

战南城

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
非父子组件之间的传值

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>非父子组件间的传值(Bus/总线/发布订阅模式/观察者模式)</title> <script src="./
复制链接

扫一扫