ref

最新推荐文章于 2023-07-16 00:57:41 发布

pj1653_9

最新推荐文章于 2023-07-16 00:57:41 发布

阅读量117

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/pj1653_9/article/details/107755799

版权

vue 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

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",
        })