2021-11-05

昵称user1026

于 2021-11-05 16:37:32 发布

阅读量114

点赞数

分类专栏：学习文章标签： javascript vue.js 前端

本文链接：https://blog.youkuaiyun.com/qq_39447162/article/details/121165947

版权

学习专栏收录该内容

3 篇文章

订阅专栏

本文记录了在Vue3中使用setup语法糖进行父子组件通信的过程，强调了如何通过defineExpose方法将子组件的方法暴露给父组件调用。在示例中，父组件通过ref调用子组件的add2方法，实现数值的同步更新，展示了Vue3中组件交互的新特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

#vue3的踩坑记录【一】

vue3 setup语法糖中父组件调用子组件方法或属性

父组件：

<script setup>
    import hello from './components/HelloWorld.vue';
    import {
        ref,
    } from "vue"
    let a = ref(1)
    let re = ref(null)

    let add = () => {
        a.value += 1;
        re.value.add2()
    }
    
</script>

<template>
    <hello ref="re"></hello>
    <div>
        <button @click="add">+</button>
    </div>
</template>

子组件：

<script setup>
  import {
    ref
  } from 'vue'
  const count = ref(0)

  function add2() {
    count.value += 2;
  }
  defineExpose({
    add2
  })
</script>

<template>
  <p>{{count}}</p>
</template>