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

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

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

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

父组件代码如下:

javascript 复制代码
<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
javascript 复制代码
<template>
  <h1>i'm demo1 content{{count}}</h1>
</template>

<script >
import {ref} from 'vue'
export default {
    setup () {
        const count = ref(999)
        return {
            count
        }
    }
}

此时父组件可以获取到子组件的count属性

demo2
javascript 复制代码
<template>
  <h1>我是demo2</h1>
</template>

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

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

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

更改后的demo2组件
javascript 复制代码
<template>
  <h1>我是demo2</h1>
</template>

<script setup>
import {defineExpose,ref} from 'vue'
const a = ref('helloss')
defineExpose({
    a
})
</script>
demo3
javascript 复制代码
<template>
  <h1>我是demo3</h1>
</template>

<script>
export default {
  data () {
    return {
        list:['a','b','c']
    }
  },
  methods: {
    btn () { 
    }
  }
}

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

相关推荐
鹏多多3 分钟前
前端音频兼容解决:音频神器howler.js从基础到进阶完整使用指南
前端·javascript·音视频开发
龙仔CLL34 分钟前
使用vue-pdf做本地预览pdf文件,通过垂直滚动条展示全部pdf内容,不展示分页按钮
前端·vue.js·pdf
前端架构师-老李34 分钟前
12、electron专题(electron-builder)
前端·javascript·electron
IT_陈寒1 小时前
JavaScript性能飞跃:5个V8引擎优化技巧让你的代码提速300%
前端·人工智能·后端
艾小码1 小时前
这份超全JavaScript函数指南让你从小白变大神
前端·javascript
reembarkation1 小时前
vue 右键菜单的实现
前端·javascript·vue.js
00后程序员张3 小时前
Fiddler抓包工具使用教程,代理设置与调试方法实战解析(含配置技巧)
前端·测试工具·ios·小程序·fiddler·uni-app·webview
2301_768350239 小时前
Vue第二期:组件及组件化和组件的生命周期
前端·javascript·vue.js
小周同学:9 小时前
Vue项目中将界面转换为PDF并导出的实现方案
javascript·vue.js·pdf
华洛10 小时前
公开一个AI产品的商业逻辑与设计方案——AI带来的涂色卡自由
前端·后端·产品