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

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

原创最新推荐文章于 2024-09-18 18:18:52 发布 · 400 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #js #html

笔记专栏收录该内容

1 篇文章

订阅专栏

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

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>