在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 () {
}
}
}
|
这种方式，父组件可以正常获取到里面的属性和方法。