文章目录
- 前言
- 一、组件的ref用法总结
- 总结
前言
之前学习过ref声明响应式对象,前几天读代码遇到了发懵的地方,详细学习了一下才发现,用法还有很多,遂总结一下ref的用法备忘。
一、组件的ref用法总结
Vue3 中的 ref 是一种创建响应式引用的方式,它在Vue生态系统中扮演着重要角色。以下是Vue3中ref属性及其相关API的几个关键点:
创建响应式变量:使用 ref 函数可以创建一个响应式的数据引用,返回的对象包含 .value 属性,该属性既可以读取也可以写入,并且是响应式的。例如:
Javascript
1import { ref } from 'vue';
2
3const count = ref(0); // 创建一个响应式引用,初始值为0
4console.log(count.value); // 输出0
5count.value++; // 改变值,这将触发视图更新
在模板中使用 ref:在模板中,可以使用 v-ref 或简写 ref 来给 DOM 元素或组件添加引用标识符。对于DOM元素:
<div ref="myDiv">Hello World</div>
然后在组件的 setup 函数内或者生命周期钩子如 onMounted 中通过 ref 访问到该元素:
onMounted(() => {console.log(myDiv.value); // 这将输出对应的DOM元素
});// 注意,在setup函数中使用需要解构
setup() {const myDiv = ref<HTMLElement | null>(null);// ...
对于子组件,ref 则指向子组件的实例:
<MyChildComponent ref="childRef" />
动态 refs:在动态渲染的组件或循环列表中,可以使用动态 ref 名称:
1<component v-for="(item, index) in items" :is="item.component" :key="index" :ref="`child${index}`" />
然后通过 getCurrentInstance() 获取这些动态 ref:Javascript
1setup() {
2 const instance = getCurrentInstance();
3 const childrenRefs = computed(() => {
4 return instance.refs;
5 });
6 // ...
7}
组件间通信:通过 ref 可以方便地在组件之间传递并操作状态,尤其适用于父子组件之间的通信。
(1)创建一个子组件 ChildComponent.vue:
<template><div><h2>{{ childMessage }}</h2><button @click="handleClick">点击我</button></div>
</template><script>
import { ref, defineComponent } from 'vue';export default defineComponent({setup(props, { emit }) {const childMessage = ref('Hello from Child');const handleClick = () => {emit('child-clicked', 'Child component clicked!');};return {childMessage,handleClick,};},
});
</script>
(2)创建一个父组件 ParentComponent.vue,并使用 ref 属性访问子组件实例:
<!-- ParentComponent.vue --><template><div><h1>Parent Component</h1><ChildComponent ref="childRef" /><button @click="callChildMethod">Call Child Method</button></div>
</template><script>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent,},setup() {const childRef = ref(null);function callChildMethod() {childRef.value.showMessage();}return {childRef,callChildMethod,};},
};
</script>
在这个示例中,我们在父组件的模板中使用了 ref 属性,并将其值设置为 “childRef”。然后,在组合式 API 的 setup 函数中,我们创建了一个名为 childRef 的响应式引用,并将其初始值设置为 null。接着,我们定义了一个名为 callChildMethod 的方法,用于调用子组件的 showMessage 方法。当用户点击按钮时,callChildMethod 方法会被调用,从而触发子组件的 showMessage 方法并在控制台输出一条消息。
import { reactive, toRef } from 'vue';
2
3const state = reactive({ count: 0 });
4const countRef = toRef(state, 'count'); // 提取出count属性的响应式引用
总结
总之,Vue3 的 ref 功能增强了Vue的响应式系统,使得开发者能够更灵活地处理组件的状态及组件间交互,同时提供了对DOM元素的直接访问能力。
人总是在接近幸福时倍感幸福,在幸福进行时却患得患失。