vue3.0의 부모 및 자식 구성 요소 간의 통신

머리말:

      vue3.0의 부모 및 자식 구성 요소 간의 통신

목차 :

아버지에서 아들로 : 제공 / 주입

아들에서 아버지로 :

부분 조립품 :

상위 구성 요소 :

다른:

vue2.0에서 this. $ parent. + parent 구성 요소의 메서드 이름 / 부모 구성 요소의 속성 이름을 사용하여 부모 구성 요소의 데이터에 정의 된 필드를 직접 사용하거나 메서드를 호출 할 수 있습니다.

하지만 vue3.0에서 사용 방법이 변경되었습니다. 설정이 직접 사용을 지원하지 않기 때문입니다.

1. 상위 구성 요소의 설정에 정의 된 필드 가져 오기

​

2. 상위 구성 요소의 설정에 정의 된 메서드를 호출합니다.

이것은 관리가 말한 것입니다 : 공식 입장

# $ parent

---

아버지에서 아들로 :

세부 정보             제공 / 주입 

아들에서 아버지로 :

부분 조립품 :

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

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

상위 구성 요소 :

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


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

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

다른:

vue2.0 에서 this. $ parent. + parent 구성 요소의 메서드 이름 / 부모 구성 요소의 속성 이름을  사용하여 부모 구성 요소의 데이터에 정의 된 필드 를  직접 사용하거나 메서드를 호출 할 수 있습니다.

기 때문에 vue3.0의 사용 방법이 변경되는 설정은 직접 사용을 지원하지 않습니다 이

1. 상위 구성 요소의 설정에 정의 된 필드 가져 오기

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

2. 상위 구성 요소의 설정에 정의 된 메서드를 호출 합니다.

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

이것은 관리가 말한 것입니다 : 공식 입장

# $ 부모

• 유형 :Vue instance

• 읽기만 가능

• 상세한:

  현재 인스턴스에 상위 인스턴스가있는 경우

•  

관련 정보:

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