vue3.0子组件与父组件通信

最新推荐文章于 2024-09-18 18:18:52 发布

Tylerdalin

最新推荐文章于 2024-09-18 18:18:52 发布

阅读量374

点赞数 1

分类专栏：笔记文章标签： vue js html

本文链接：https://blog.youkuaiyun.com/LiuLin_CF/article/details/117427298

版权

笔记专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了Vue3.0中如何通过props和emit实现父子组件之间的通信，展示了如何使用ref和getCurrentInstance来管理子组件的状态。通过实际代码演示，帮助开发者理解在最新版本的Vue中进行组件间通信的最佳实践。

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

vue3.0 子组件与父组件通信

vue3.0

vue3.0

父组件parentComponent.vue

// An highlighted block
<template>
  <div>
    <h1>{{title}}</h1>
    <span>{{content}}</span>
    <button @click="getSubassembly">获取子组件的方法</button>
    <subassembly @updateDialog="getSubassembly" :content="content" ref="mySubassembly"></subassembly>
  </div>
</template>
<script>
import {getCurrentInstance, reactive, ref, toRefs} from 'vue'
import subassembly from './subassembly'
export default {
  props: {
    content: Object
  },
  setup (props, context) {
    const mySubassembly = ref()
    console.log(props.content)
    let {ctx} = getCurrentInstance()
    // ctx 就是代表vue2.0的this
    const state = reactive({
      title: '我是父组件',
      content: {
        id: '1',
        name: '组织部'
      }
    })
    function getSubassembly() {
      mySubassembly.value.getSubassembly("调用子组件")
    }
    console.log(ctx)
    context.emit('updateDialog')
    return {
      getSubassembly,
      mySubassembly,
      ...toRefs(state)
    }
  },
  components: {
    subassembly
  }
}
</script>

子组件subassembly.vue

// An highlighted block
<template>
  <div>
    <h1>{{title}}</h1>
    <span>{{content}}</span>
    <button @click="getSubassembly">获取子组件的方法</button>
    <subassembly @updateDialog="getSubassembly" :content="content" ref="mySubassembly"></subassembly>
  </div>
</template>
<script>
import {getCurrentInstance, reactive, ref, toRefs} from 'vue'
import subassembly from './subassembly'
export default {
  props: {
    content: Object
  },
  setup (props, context) {
    const mySubassembly = ref()
    console.log(props.content)
    let {ctx} = getCurrentInstance()
    // ctx 就是代表vue2.0的this
    const state = reactive({
      title: '我是父组件',
      content: {
        id: '1',
        name: '组织部'
      }
    })
    function getSubassembly() {
      mySubassembly.value.getSubassembly("调用子组件")
    }
    console.log(ctx)
    context.emit('updateDialog')
    return {
      getSubassembly,
      mySubassembly,
      ...toRefs(state)
    }
  },
  components: {
    subassembly
  }
}
</script>