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>