vue3：10、组合式API-标签的ref属性和defineExpose宏函数

有蝉

已于 2024-02-02 14:35:15 修改

阅读量614

点赞数

分类专栏： vue3 文章标签： vue.js javascript 前端

于 2023-09-07 16:23:02 首次发布

本文链接：https://blog.youkuaiyun.com/qq_37899792/article/details/132740208

版权

vue3 专栏收录该内容

34 篇文章

订阅专栏

文章讲述了Vue中使用`ref`获取DOM或组件实例，以及如何通过`defineExpose`在`scriptsetup`语法下公开组件属性和方法，以便于父子组件间的通信。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ref

作用：用于注册模板引用。

用在普通DOM标签上，获取的是DOM节点。
用在组件标签上，获取的是组件实例对象。

defineExpose()

默认情况下在<script setup>语法糖下组件内部的属性和方法是不开放给父组件的
可以通过defineExpose编译宏指定哪些属性和方法允许访问

子组件 child.vue

<script setup>

const count = ref(99)
const sayHi = () => {
  console.log('hi', count.value)
}
defineExpose({
  count,
  sayHi
})

</script>

如此处理之后，父组件才能调用


<script setup>
  import { ref } from 'vue'
  const childeRef = ref()
    onMounted(() => {
      childeRef.value.sayHi() // 调用子组件函数
    })
</script>
<template>
    调用一下子组件
{{childeRef.count}}
  <child ref="childeRef" />
<template>