vue-非父传子事件（中央事件）&ref

最新推荐文章于 2024-04-27 02:57:16 发布

@Tiramisu

最新推荐文章于 2024-04-27 02:57:16 发布

阅读量83

点赞数

分类专栏：笔记文章标签： vue.js

本文链接：https://blog.csdn.net/qq_46606159/article/details/105031107

版权

笔记专栏收录该内容

40 篇文章 0 订阅

订阅专栏

var bus = new Vue();

mounted生命周期中进行监听

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Examples</title>
</head>
<body>
    <div id="box">
        <weixinauthor></weixinauthor>
        <weixinuser></weixinuser>
    </div>
    <script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">

        var bus = new Vue();  //空vue实例 就是中央事件总线

        Vue.component("weixinauthor", {
            template: `<div style="background:blue">
          我是一个微信公众号作者
          <input type="text" ref="mytext"/> 
          <button @click="handleClick()">发布</button>
        </div>`,
            methods: {
                handleClick() {
                    bus.$emit("weixinmessage", this.$refs.mytext.value)//mytext推送值
                }
            }
        })

        Vue.component("weixinuser", {
            // 合适的位置先订阅好 .$on监听，.$emit触发
            template: `<div style="background:yellow">
          我是一个微信用户
        </div>`,
            mounted() {
                bus.$on("weixinmessage", (data) => {
                    console.log("收到推送了", data)
                })
                console.log("生命周期函数-当前组件的dom创建完成之后就会调用")
            }
        })
        
        new Vue({
            el: "#box"
        })
    </script>
</body>
</html>

@Tiramisu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue-非父传子事件（中央事件）&ref

var bus = new Vue(); mounted生命周期中进行监听<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Examples</title></head><body> <di...
复制链接

扫一扫