ref

最新推荐文章于 2025-11-19 15:56:37 发布

原创最新推荐文章于 2025-11-19 15:56:37 发布 · 204 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

18 篇文章

订阅专栏

本文深入探讨了Vue.js框架中ref属性的使用方法，包括如何通过ref获取DOM元素和组件实例，以及如何利用事件机制实现组件间的通信。通过具体示例，展示了如何创建事件总线来促进不同组件之间的消息传递。

ref引用，ref用法：ref=“自定义名字”；
1、ref放在标签上，拿到是原生节点：
在这里插入图片描述

2、ref放在组件上，拿到的是组件对象

不仅可以访问组件属性，还可以访问组件里的方法

事件机制
1、使用 $o n (e v e n t N a m e) 监听事件 2 、使用$ emit(eventName)触发事件
在这里插入图片描述

var bus = new Vue();//空Vue实例，就是中央事件总线
        Vue.component("author",{
            template:`<div>
            我是一个微信作者
            <input type="text" ref="mytext"/>
            <button @click="handleClick()">发布</button>
            </div>`,
            methods:{
                handleClick(){
                    bus.$emit("sendmessage",this.$refs.mytext.value)
                }
            }
        })
        Vue.component("user",{
            //合适的位置先，订阅好 bus.$on
            template:`<div>
            我是一个微信用户
            </div>`,
            mounted(){
                bus.$on("sendmessage",function(data){
                    console.log("收到推送",data);
                })
                console.log("生命周期函数")
            }
        })
        new Vue({
            el:"#box",
        })