Comunicación entre los componentes padre e hijo de vue3.0

Prefacio:

      Comunicación entre los componentes padre e hijo de vue3.0

Tabla de contenido:

De padre a hijo: proporcionar / inyectar

De hijo a padre:

Subconjunto:

Componente padre:

otro:

Podemos usar esto. $ Parent. + Nombre del método del componente principal / nombre de la propiedad del componente principal en vue2.0 para usar directamente el campo definido por los datos del componente principal o llamar al método

Pero el método de uso en vue3.0 se cambia, porque la configuración no admite el uso directo de este

1. Obtenga los campos definidos en la configuración del componente principal

​

2. Llame al método definido en la configuración del componente principal.

Esto es lo que dijo el funcionario: entrada oficial

# $ padre

---

De padre a hijo:

            proporcionar / inyectar  detalles

De hijo a padre:

Subconjunto:

 <el-button @click="changeParentNum('111')">点我给父组件发数据</el-button>

 setup (props, ctx) {
    const changeParentNum = data => {
      // 通过ctx调用emit事件 需要注意的是Vue2.x中使用 $emit切勿混淆
      ctx.emit('handle', data)
    }
     return {
      changeParentNum
    }
  }

Componente padre:

<Table @handle="handleFun"></Table>


import { ElMessage} from 'element-plus'
setup() {
    function handleFun(data) {

      ElMessage.success({
        message: data,
        type: 'success'
      })
    }
    return {
      handleFun,
    }
  }

otro:

Podemos usar esto. $ Parent. + Nombre del método del componente principal / nombre de la propiedad del componente principal en  vue2.0 para  usar directamente el campo definido por los datos del componente principal o llamar al método

Pero el método de uso en vue3.0 se cambia, porque la configuración no admite el uso directo de este

1. Obtenga los campos definidos en la configuración del componente principal

import { getCurrentInstance  } from 'vue'
setup (props, ctx) {
    const { proxy } = getCurrentInstance()
    let a = proxy.$parent.state
}

2. Llame al método definido en la configuración del componente principal.

import { getCurrentInstance  } from 'vue'
setup (props, ctx) {
    const { proxy } = getCurrentInstance()
    proxy.$parent.handleFun('我调用父亲')
}

Esto es lo que dijo el funcionario : entrada oficial

# $ padre

• Tipos de:Vue instance

• Solo legible

• detallado:

  La instancia principal, si la instancia actual tiene una

•  

Información relevante:

https://www.cnblogs.com/qt-fei/p/14264290.html