码迷,mamicode.com
首页 > 其他好文 > 详细

vue 非父子通信

时间:2019-12-19 23:12:09      阅读:93      评论:0      收藏:0      [点我收藏+]

标签:meta   cti   div   device   sde   fun   pat   OLE   nbsp   

<!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 非父子通信

标签:meta   cti   div   device   sde   fun   pat   OLE   nbsp   

原文地址:https://www.cnblogs.com/bozhengheng/p/12070596.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!