境外公司在国内建网站,公司起名大全2021最新版的免费,建设中网站如何上传图片,网站开发与运维面试问题在 Vue 3 中#xff0c;ref 不仅可以用于创建响应式数据#xff0c;还可以用于获取 DOM 节点或组件实例。通过 ref#xff0c;我们可以直接访问模板中的元素或组件#xff0c;并在需要时操作它们。此外#xff0c;defineExpose 用于在 script setup 语法中显式暴露…在 Vue 3 中ref 不仅可以用于创建响应式数据还可以用于获取 DOM 节点或组件实例。通过 ref我们可以直接访问模板中的元素或组件并在需要时操作它们。此外defineExpose 用于在 script setup 语法中显式暴露组件的属性或方法。本文将详细介绍 ref 和 defineExpose 的使用方法并提供代码示例。 1. ref 的基本概念
ref 在模板中有两种主要用途 获取 DOM 节点 当 ref 用在普通 DOM 标签上时获取的是 DOM 节点。 获取组件实例 当 ref 用在组件标签上时获取的是组件实例对象。 2. 使用 ref 获取 DOM 节点
我们可以通过 ref 获取模板中的 DOM 节点并在脚本中操作它们。
2.1 代码示例
templatediv classpersonh2 reftitle2前端/h2h3 reftitle3Vue/h3input typetext refinput placeholder请输入内容 /br /br /button clickshowLog点我打印内容/button/div
/templatescript setup langts
import { ref } from vue;// 获取 DOM 节点的引用
const title2 refHTMLHeadingElement | null(null);
const title3 refHTMLHeadingElement | null(null);
const input refHTMLInputElement | null(null);// 打印 DOM 节点的内容
function showLog() {console.log(title2:, title2.value?.textContent);console.log(title3:, title3.value?.textContent);console.log(input value:, input.value?.value);
}
/scriptstyle scoped
.person {padding: 20px;background-color: #f0f0f0;border-radius: 10px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}button {margin-top: 10px;padding: 5px 10px;
}
/style2.2 代码解析 ref 获取 DOM 节点 使用 ref 绑定到 h2、h3 和 input 标签上获取它们的 DOM 节点。在脚本中通过 ref 的值访问这些 DOM 节点。 操作 DOM 节点 点击按钮时打印各个 DOM 节点的内容或值。 3. 使用 ref 获取组件实例
当 ref 用在组件标签上时可以获取该组件的实例对象从而访问组件的属性或方法。
3.1 代码示例
父组件Parent.vue
templatedivChild refchildRef /button clickcallChildMethod调用子组件方法/button/div
/templatescript setup langts
import { ref } from vue;
import Child from ./Child.vue;// 获取子组件的实例
const childRef refInstanceTypetypeof Child | null(null);// 调用子组件的方法
function callChildMethod() {childRef.value?.sayHello();
}
/script子组件Child.vue
templatedivh1子组件/h1/div
/templatescript setup langts
// 暴露方法给父组件
function sayHello() {console.log(Hello from Child component!);
}// 使用 defineExpose 暴露方法
defineExpose({sayHello
});
/script3.2 代码解析 父组件 使用 ref 获取子组件的实例。通过 childRef.value 访问子组件暴露的方法 sayHello。 子组件 使用 defineExpose 显式暴露 sayHello 方法。父组件可以通过 ref 访问子组件的暴露内容。 4. defineExpose 的作用
在 script setup 语法中组件的属性和方法默认是私有的外部无法直接访问。通过 defineExpose我们可以显式暴露组件的属性或方法使父组件能够通过 ref 访问它们。
4.1 使用场景
暴露组件的公共方法供父组件调用。暴露组件的内部状态或数据。
4.2 代码示例
templatedivh1子组件/h1p计数{{ count }}/p/div
/templatescript setup langts
import { ref } from vue;const count ref(0);function increment() {count.value;
}// 暴露 count 和 increment
defineExpose({count,increment
});
/script5. 总结 ref 的作用 获取 DOM 节点或组件实例。用于操作 DOM 或访问组件的属性和方法。 defineExpose 的作用 在 script setup 中显式暴露组件的属性或方法。使父组件能够通过 ref 访问子组件的暴露内容。 适用场景 操作 DOM 节点如表单输入、动态样式等。父子组件通信如调用子组件方法、访问子组件状态。
通过本文的介绍和代码示例希望你能更好地理解 Vue 3 中 ref 和 defineExpose 的使用方法并在实际项目中灵活运用它们
