vue3父组件使用ref获取子组件的属性和方法

在vue3中父组件访问子组件中的属性和方法是需要借助于ref:

1.<script setup> 中定义响应式变量 例如： const demo1 = ref(null)

2.在引入的子组件标签上绑定ref属性的值与定义的响应式变量同名( <demo1 ref="demo1"/>)。

父组件代码如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<template>   <demo1 ref="demo1"/>   <demo2 ref="demo2"/>   <demo3 ref="demo3"/> </template> <script setup> import Demo1 from '@/components/demo1.vue' import Demo2 from '@/components/demo2.vue' import Demo3 from '@/components/demo3.vue' import {ref,onMounted} from 'vue' const demo1 = ref(null) const demo2 = ref(null) const demo3 = ref(null) onMounted(()=> {   console.log(demo1.value.count,'demo1子组件')   console.log(demo2.value?.a,'demo2子组件')   console.log(demo3.value.list[0],"demo3子组件") }) </script>

子组件代码如下：

demo1.vue

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<template>   <h1>i'm demo1 content{{count}}</h1> </template> <script > import {ref} from 'vue' export default {     setup () {         const count = ref(999)         return {             count         }     } }

此时父组件可以获取到子组件的count属性（此时子组件用的是  export default 的写法）

demo2

1 2 3 4 5 6 7 8

<template>   <h1>我是demo2</h1> </template> <script setup> import {defineExpose,ref} from 'vue' const a = ref('helloss') </script>

当使用 <script setup> 写法会导致父组件无法访问到子组件中的属性和方法。

使用 <script setup> 的组件，想要让父组件访问到它的属性和方法需要借助与defineExpose来指定需要暴露给父组件的属性。

更改后的demo2组件

1 2 3 4 5 6 7 8 9 10 11

<template>   <h1>我是demo2</h1> </template> <script setup> import {defineExpose,ref} from 'vue' const a = ref('helloss') defineExpose({     a }) </script>

demo3

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<template>   <h1>我是demo3</h1> </template> <script> export default {   data () {     return {         list:['a','b','c']     }   },   methods: {     btn () {     }   } }

这种方式，父组件可以正常获取到里面的属性和方法。