vue3通过defineExpose 把ref绑定自定义组件的dom及方法暴露给父组件

vue3中默认父组件通过ref绑定子组件是获取不到子组件中的dom和变量、方法的,子组件需要通过defineExpose方法把需要暴露的东西暴露出去,父组件才能拿的到,实例演示一下:

子组件 Child.vue

<template>
  <div>
    <input type="text" v-model="content" />
  </div>
</template>
<script lang='ts' setup>
import { ref } from 'vue'
const content = ref('')
</script>

父组件 Father.vue

<template>
  <div>
    <Child ref='rChild' />
  </div>
</template>
<script lang='ts' setup>
import { ref,onMounted } from 'vue'
import Child from './Child.vue'
const rChild= ref(null)
onMounted(()=>{
  console.log(rChild.value)
})
</script>

打印出来是一个proxy对象,里面拿不到子组件的任何信息,通过defineExpose改造一下子组件,即可能拿到子组件里面的内容

改造子组件 Child.vue

<template>
  <div ref='rInput'>
    <input type="text" v-model="content" />
  </div>
</template>
<script lang='ts' setup>
import { ref } from 'vue'
const content = ref('')
const rInput = ref(null)
defineExpose({rInput,content })
</script>

通过上面的子组件的改造,那父组件就可以通过rChild.value.contentrChild.value.rInput拿到子组件中的content的变量及dom结构。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容