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

vue

vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。

项目地址：https://gitcode.com/gh_mirrors/vu/vue

免费下载资源

逆风优雅

4439人浏览 · 2024-05-23 14:31:48

逆风优雅 · 2024-05-23 14:31:48 发布

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

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

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

父组件代码如下：

<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

<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

<template>

<h1>我是demo2</h1>

</template>

<script setup>

import {defineExpose,ref} from 'vue'

const a = ref('helloss')

</script>

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

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

更改后的demo2组件

<template>

<h1>我是demo2</h1>

</template>

<script setup>

import {defineExpose,ref} from 'vue'

const a = ref('helloss')

defineExpose({

a

})

</script>

demo3

<template>

<h1>我是demo3</h1>

</template>

<script>

export default {

data () {

return {

list:['a','b','c']

}

},

methods: {

btn () {

}

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

GitHub 加速计划 / vu / vue

下载

vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。

最近提交(Master分支：8 个月前 )

9e887079 [skip ci] 7 个月前

73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 10 个月前