vue3에서 DefineExpose를 사용하는 방법

defineExpose 컴파일러 매크로를 사용하여 <script setup> 구성 요소에 노출될 속성을 명시적으로 지정할 수 있습니다. defineExpose 编译器宏来显式指定在 <script setup> 组件中要暴露出去的属性：

<script setup>
import { ref } from &#39;vue&#39;

const a = 1
const b = ref(2)

defineExpose({
  a,
  b
})
</script>

当父组件通过模板引用的方式获取到当前组件的实例，获取到的实例会像这样 { a: number, b: number }

<template>
  <h3>defineExpose 使用 父组件</h3>
  <child ref="getChildData"></child>

</template>

<script setup lang="ts">
import Child from "@/components/exposeChildren.vue"
import { ref,onMounted,toRaw} from &#39;vue&#39;
    // 文档说setup写在script上组件是关闭的
    // 也就是说父组件使用getChildData.xxx访问不到子组件的数据
    // 此时我们需要用defineExpose把需要传递的数据暴露出去，这样外部才能访问到
    // 同理也可以接收外部传来的值

const getChildData = ref(null)
const obj = {
    name: &#39;alan&#39;,
    desc: &#39;大笨蛋&#39;,
    age: 18
}

const cc= getChildData.value?.[&#39;num&#39;]
console.log(cc) //undefined,此时还未找到子组件暴露的数据

onMounted(()=>{
  //获取子组件的data数据，什么时候获取根据自己业务来
  const bb:any= getChildData.value?.[&#39;updata&#39;]
  console.log(bb()) // 123,这时候得到的是子组件的初始值，因为还未给子组件传递数据
  const a:any= getChildData.value?.[&#39;getData&#39;] 
  a(obj) ////给子组件传递数据
  const b:any= getChildData.value?.[&#39;updata&#39;]
  const c= getChildData.value?.[&#39;num&#39;]
  console.log(toRaw(b())) // {name: &#39;alan&#39;, desc: &#39;大笨蛋&#39;, age: 18} ,这里得到的是个proxy,所以需要toRaw()方法转成对象 
  console.log(c) // 666
})


</script>
<style scoped>
</style>

상위 구성 요소가 다음을 통해 참조되는 경우 template 현재 구성 요소의 인스턴스를 가져옵니다. 가져온 인스턴스는 다음과 같습니다. { a: number, b: number } (ref는 일반 인스턴스처럼 자동으로 압축이 풀립니다)

Example

상위 구성 요소

<template>
  <h3>defineExpose 使用 子组件</h3>
  <div>{{ data }}</div>
</template>

<script setup lang="ts">
import { ref, defineExpose } from &#39;vue&#39;

const data = ref(123)
const num = ref(666)
defineExpose({
    updata(){
        return data.value //暴露出去父组件可以拿到data的数据.此时值为123
    },
    getData(res:any){
        data.value = res //父组件传递来的值赋值给data
        // 此时的data变成了 Proxy
        //     {
        //     name: &#39;alan&#39;,
        //     desc: &#39;大笨蛋&#39;,
        //     age: 18
        //     }
    },
    num
})
</script>
<style scoped>
</style>

하위 구성 요소🎜rrreee

위 내용은 vue3에서 DefineExpose를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!