vue 非父子通信

Posted bozhengheng

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue 非父子通信相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <maweihua></maweihua>
        <kangchen></kangchen>
    </div>
    <script>
        let hanfei = new Vue();
        let maweihua = {
            template: `<div>
                        <h1>这是马伟华</h1>
                        <button @click="my_click">点我向康抻说话</button>
                        </div>`,
            methods: {
                my_click: function () {
                    console.log("马")
                    // 向康抻说话
                    // 向中间调度器提交事件
                    hanfei.$emit("maweihua_say", "晚上等我一起吃饭~~~")
                }
            }
        };
        let kangchen = {
            template: `<div><h1>这是康抻</h1>{{say}}</div>`,
            data(){
              return {
                  say: ""
              }
            },
            mounted(){
                // 监听中间调度器中的方法
                let that = this;
                hanfei.$on("maweihua_say", function (data) {
                    console.log(data)
                    that.say = data
                })
            }
        };

        const app = new Vue({
            el: "#app",
            components: {
                maweihua: maweihua,
                kangchen: kangchen
            }
        })

    </script>
</body>
</html>

 技术图片技术图片

以上是关于vue 非父子通信的主要内容，如果未能解决你的问题，请参考以下文章

Vue中的Bus（总线）实现非父子组件通信

12.组件化开发2-非父子组件之间通信-祖先和后代之间的通信

vue.js 创建组件 子父通信 父子通信 非父子通信

vue非父子组件间通信

Vue_(组件通讯)非父子关系组件通信

vue组件通信之非父子组件通信