<p><br /></p><h2>상황</h2>
<p><code>header.vue</code> 구성 요소가 <code>container-nav.vue</code> ; 구성 요소(구성 요소 계층 구조 참조) 그러나 데이터가 주입되면 초기 로드 시 정의되지 않습니다. </p>
<p><strong>현재 구성요소 계층 구조: </strong></p>
<li>header.vue > header-nav-menu.vue > 컨테이너-nav.vue</li>
</ul>
<h1>시도 1 - header.vue(조부모)</h1>
<p>이 구성 요소에서는 pinia(storeCommon)의 <code>Provide() {}</code> 내부에서 다음 문자열 <code>'/'</code>를 가져옵니다. </p>
<pre class="brush:php;toolbar:false;">'vue'에서 { 정의 구성 요소 } 가져오기
'@/store'에서 parentStore 가져오기
기본 정의 내보내기({
설정() {
// this.navHome에 액세스할 수 없어야 함 -> 정의되지 않음(옵션 API 이전에 로드됨)
console.log("1. 헤더에서 설정 호출")
const storeCommon = parentStore()
{ storeCommon } 반환
},
생성 전() {
// this.navHome에 액세스할 수 없어야 함 -> 정의되지 않음(옵션 API 이전에 로드됨)
console.log("2. 헤더에서 beforeCreate 호출")
},
제공하다() {
console.log("3. 헤더에서 제공 호출")
반품 {
navHome: this.storeCommon.textualData[0]?.navigation.links.home
}
},
만들어진() {
// this.navHome에 대한 액세스 권한이 있어야 합니다 -> '/'(옵션 API 이후 로드)
console.log("9. 컨테이너 탐색에서 beforeCreate 호출: ", this.$refs.navHome)
},
탑재() {
// this.navHome에 대한 액세스 권한이 있어야 합니다 -> '/'(옵션 API 이후 로드)
console.log("8. 컨테이너 탐색에서 beforeCreate 호출: ", this.$refs.navHome)
}
})</pre>
1번 시도 - 컨테이너-nav.vue(하위)
<p>이 구성요소에는 <code>header.vue</code>에서 제공하는 <code>navHome</code></p>
<pre class="brush:php;toolbar:false;">'vue'에서 { 정의 구성 요소 } 가져오기
기본 정의 내보내기({
주입: [ 'navHome' ],
설정() {
// this.navHome에 액세스할 수 없어야 합니다 -> 정의되지 않음(옵션 API 이전에 로드됨)
console.log("4. 컨테이너 탐색에서 설정 호출")
},
생성 전() {
// this.navHome에 액세스할 수 없어야 합니다 -> 정의되지 않음(옵션 API 이전에 로드됨)
console.log("5. 컨테이너 탐색에서 beforeCreate 호출")
},
만들어진() {
// this.navHome에 대한 액세스 권한이 있어야 합니다 -> '/'(옵션 API 다음에 로드됨)
console.log("6. 컨테이너 탐색에서 beforeCreate 호출: ", this.$refs.navHome)
},
탑재() {
// this.navHome에 대한 액세스 권한이 있어야 합니다 -> '/'(옵션 API 다음에 로드됨)
console.log("7. 컨테이너 탐색에서 beforeCreate 호출: ", this.$refs.navHome)
}
})</pre>
<h1>尝试 1 - 测试</h1>
<p>使사용 console.logs 运行以下代码会产生以下结果：</p>
<pre class="brush:php;toolbar:false;">1. 헤더에서 설정 호출
2. 헤더에서 beforeCreate 호출: 정의되지 않음 -> 옳은
3. 헤더에서 Provide 호출
4. 컨테이너 탐색에서 설정 호출
5. 컨테이너 탐색에서 beforeCreate 호출: 정의되지 않음 -> 옳은
6. 컨테이너 탐색에서 생성된 호출: 정의되지 않음 -> 올바르지 않음('/'여야 함)
7. 컨테이너 탐색에 탑재된 호출: 정의되지 않음 -> 올바르지 않음('/'여야 함)
8. 헤더에 탑재된 호출: 정의되지 않음 -> 올바르지 않음('/'여야 함)
9. 헤더에 생성된 호출: 정의되지 않음 -> 올바르지 않음('/'여야 함)</pre>
<시간 />
<h1>尝试 2 - header.vue(祖父母)</h1>
<p>使use与는 이전과 같은 시대와 유사한 API, 除了使用 <code>setup</code> 와 <코드>제공</코드>。</p>
<pre class="brush:php;toolbar:false;">import { 정의 구성 요소, 제공 } 'vue'에서
'@/store'에서 parentStore 가져오기
설정() {
// 1. 이런 식으로 시도했습니다.
const navLinkHome = parentStore().getTextualData[0]?.navigation.links.home
const navHome = 제공('navHome', navLinkHome)
// 2. 이런 식으로 시도했습니다.
const navHome = 제공('navHome', parentStore().getTextualData[0]?.navigation.links.home)
반품 {
// 1 & 2
탐색홈
// 그리고 이 방법으로도
navHome: 제공('navHome', parentStore().getTextualData[0]?.navigation.links.home)
}
}</pre>
<h1>尝试 2 - 컨테이너-nav.vue(子级)</h1>
<pre class="brush:php;toolbar:false;">'vue'에서 import { 정의 구성 요소, 주입 }
설정() {
const navHome = 주입('navHome')
반품 {
탐색홈
// 이것도 시도했지만 위와 동일하지만 더 길어졌습니다.
navHome: navHome
}
}</pre>
<h1>尝试 2 - 测试</h1>
<p>使사용 console.logs 运行以下代码会产生以下结果：</p>
<pre class="brush:php;toolbar:false;">1. 헤더에서 설정 호출
2. 헤더에서 beforeCreate 호출: 정의되지 않음 -> 옳은
3. 컨테이너 탐색에서 설정 호출
4. 컨테이너 탐색에서 beforeCreate 호출: 정의되지 않음 -> 옳은
5. 컨테이너 탐색에서 생성된 호출: 정의되지 않음 -> 올바르지 않음('/'여야 함)
6. 컨테이너 탐색에 탑재된 호출: 정의되지 않음 -> 올바르지 않음('/'여야 함)
7. 헤더에 탑재된 호출: 정의되지 않음 -> 올바르지 않음('/'여야 함)
8. 헤더에 생성된 호출: 정의되지 않음 -> 올바르지 않음('/'여야 함)</pre>
混乱
<li><p>首先，저는 <code>header.vue</code> 中使용 <code>provide() {}</code> 옵션 API 时，并尝试引用 <code>navHome</code> 。我会收到一条错误消息，说它가 <code>CreateComponentPublicInstance</code>에 있습니다. 类型上不存在。为了解决这个问题,我改为使用 <code>this.$refs.navHome</code> - 甚至不确这是否是正确的做法.</p>
</li>
<li><p>其次，当에서 <code>container-nav.vue</code> 组件中使용 <code>inject: [ 'navHome' ]</code> 时，我无法使用 <code>this.navHome</code> 访问它.이번에도 <code>this.$refs.navHome</code>를 통해서만 액세스할 수 있습니다. </p>
</li>
</ul>
<p>하지만. </p>
<li><code>header.vue</code>의 설정 메소드에서 Provide를 사용하고 <code>container-nav.vue</code>의 설정 메소드에서 Inject를 사용할 때 <code> ;this.navHome</code>는 <code>navHome</code>에 액세스합니다. 왜 이런 일이 발생하는지 잘 모르겠습니다. </li>
</ul><p><br /></p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
- 반작용 객체가 아니기 때문에
- 또는 다음과 같은 반응형 개체를 제공할 수 있습니다.
으아악parentStore().getTextualData[0]?.navigation.links.home在父级提供时具有值"/"반드시 확인해야 합니다this.$refs.navHome是错误的方式，this.navHome제대로 작동할 겁니다. 하지만 Combined API 스타일