ref

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

ref引用,ref用法:ref=“自定义名字”;
1、ref放在标签上,拿到是原生节点:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
2、ref放在组件上,拿到的是组件对象
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
不仅可以访问组件属性,还可以访问组件里的方法

事件机制
1、使用on(eventName)监听事件2、使用on(eventName)监听事件 2、使用on(eventName)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",
        })

在这里插入图片描述

08-12
在技术开发中,`ref` 关键字主要用于方法参数的传递中,允许方法对传入的参数进行修改,并将修改后的值返回给调用者。与 `out` 关键字不同,`ref` 参数在调用方法之前必须进行初始化。这一机制在需要双向数据传递的场景中非常有用。 ### 使用场景 1. **需要修改原始变量值的情况** 当方法需要修改传入的变量,并希望该修改反映到方法外部时,可以使用 `ref` 关键字。例如,交换两个变量的值: ```csharp void Swap(ref int a, ref int b) { int temp = a; a = b; b = temp; } ``` 在该方法中,使用 `ref` 保证了传入的变量 `a` 和 `b` 能够被修改,并将结果带回调用处。 2. **性能优化** 对于较大的值类型(如结构体),使用 `ref` 可以避免在方法调用时进行不必要的复制操作,从而提升性能。例如: ```csharp void ProcessLargeStruct(ref MyStruct data) { // 直接操作原始数据 data.Value += 10; } ``` 3. **与 COM 交互** 在与 COM(Component Object Model)交互时,`ref` 经常用于处理参数传递,尤其是在需要支持多种参数传递模式的接口中。 4. **多返回值场景** 虽然 `out` 更适合用于多返回值,但在某些情况下,`ref` 也可以用于提供额外的输出参数,特别是当调用者需要提供初始值时。 ### 实现方法 在 C# 中,使用 `ref` 关键字的方法定义和调用方式如下: #### 方法定义 ```csharp void ModifyValue(ref int value) { value += 100; } ``` #### 方法调用 ```csharp int number = 50; ModifyValue(ref number); Console.WriteLine(number); // 输出 150 ``` 需要注意的是,调用时必须显式使用 `ref` 关键字,以明确表示参数是按引用传递的。 ### 注意事项 - `ref` 参数必须在调用前初始化,否则会导致编译错误。 - `ref` 和 `out` 关键字不能重载同一方法签名,因为它们在编译时被视为相同的方法签名。 - 使用 `ref` 时应谨慎,避免因参数修改带来的副作用,影响代码的可读性和维护性。 通过合理使用 `ref` 关键字,可以在需要双向数据交互的场景中实现更高效和直观的代码逻辑。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值