호스트 설정 기능 외부에서 Vue3 동적 구성 요소에 프로비전/주입을 선언하는 방법이 있나요?

Question

Vue3에서 동적 구성요소를 만들고 있습니다. 저는 props를 제공하기 위해 v-bind를 사용합니다.

<code><comComponent :is='MyComponent' v-bind='myProps' />

<p><code>를 사용하여 기능을 제공/삽입</code>하고 싶습니다. 내가 제공하는 속성을 동적 구성 요소에 어떻게 넣을 수 있나요? 내 동적 구성요소는 <code>setup</code> 함수에서 <code>inject</code>를 호출하고 해당 하위 구성요소 <code>에 대해 </code> 값을 기대합니다. </p>
<p>이 내용은 Vue에 문서화되어 있지 않지만 시도했지만 성공하지 못했습니다. </p>
<pre class="brush:php;toolbar:false;"><comComponent :is='MyComponent' v-bind='myProps' :provide='myProvidedProps'/>

provide 개체를 props

Answer 1

Vue3 소스 코드를 탐색한 후에는 템플릿에서 직접 动态组件指示provide지정할 수 없습니다. 동적 구성 요소를 호스팅하는 상위 요소의 설정 함수 또는 옵션이나 동적 구성 요소의 설정 또는 옵션에서 호출되어야 합니다.

두 가지 옵션은 다음과 같습니다.

1. 동적 구성 요소를 호스팅하는 구성 요소에서 provide를 호출합니다.

으아악 으아악

동적 구성 요소가 활성화되기 전에 setter 함수가 호출되기 때문에 이는 작동하지 않습니다. 또한 제공된 값과 함께 구성 요소 유형을 설정해야 합니다.

2. props로 제공할 항목을 컴포넌트에 보내고 동적 컴포넌트가 이를 호출하도록 합니다.

으아악 으아악

내 구성 요소

으아악

이제 여기에는 문제가 있습니다. 이제 각 동적 구성 요소가 들어오는 공급자를 이해하고 호출하는 일을 담당해야 하기 때문입니다.

해결책 1

제공된 가치를 알아야 하는 각 구성 요소에 대한 솔루션은 가치를 제공하는 중간 구성 요소를 만드는 것입니다.

사용 가능(중급 구성품)

으아악

다음과 같이 사용하세요:

으아악

해결책 2

보다 깔끔한 솔루션은 연결 유지 작동 방식과 유사한 래퍼 구성 요소를 만드는 것입니다. 대상 구성요소를 默认槽에 넣기만 하면 됩니다.

provided.vue

으아악

다음과 같이 사용하세요:

으아악