在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 () {

    }

  }

}

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

GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
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> 4 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐