Vue: 제공된 소품은 기능 구성 요소에 주입되지 않습니다.

이는 parent 대신 child 이 vm 자식으로 간주되기 때문입니다 (문제 일 수 있음). 따라서 provide 에 vm provide 를 써야 할 수도 있습니다.

BTW, 바이올린이 [email protected]을 사용

provide injection에 대한 조회 알고리즘은 자식이 제공된 속성을 확인한 다음 제공된 props가 루트에있을 때까지 $parent 계층 구조를 반복하는 것입니다.
https://github.com/vuejs/vue/blob/b182ac40697edbe8253d4bd68b6ac09e93259e1c/src/core/instance/inject.js#L59 -L59

바이올린을 실행할 수 없었지만 https://jsfiddle.net/Austio/vhgztp59/7/ 이 바이올린을 실행했을 때 조회 컨텍스트에 도달했을 때 자식 구성 요소에서 $ parent가 정의되지 않았습니다. 적어도 이것이 슬롯으로 렌더링하는 문제가 아니고 구성 요소 간의 관계가 없다면 시작입니다.

슬롯이 해결되기 전에 기능 구성 요소가 렌더링 된 것처럼 보입니다.

@Kingwl이 맞고 그것은 일종의 기술적 요구 사항입니다.

내가 그것에 열중했기 때문에 요점을 제기 한 것을 기억합니다. 결국에는 기능적 구성 요소가 렌더링되는 구성 요소에 연결되어 슬롯에서 사용되면 외부 구성 요소에 연결되기 때문에 정상적으로 보였습니다. 그러나 작동하지 않는 구성 요소에는 해당되지 않습니다.

컨테이너를 분사 mode: 'foo' 및 렌더링 <div><slot/></div>

<!-- rendered in App -->
<container>
   <!-- parent is App, mode is undefined -->
  <functional></functional>
</container>

<container>
   <!-- parent is container, mode is foo -->
  <not-functional></not-functional>
</container>

http://jsfiddle.net/p861bj9y/

편집 : @alidcastano Vue 2를 사용하지 않았기 때문에 귀하의 의견에서 바이올린을 업데이트했습니다.

Haha 바이올린에서 잘못된 Vue 버전을 사용하여 미안합니다. 내가 깨닫지 못한 JSX를 구성 할 수 없다는 것에 너무 사로 잡혔습니다. @posva 예제를 수정

-

따라서 여기서 문제는 기능 구성 요소가 제공된 속성을받을 수 없다는 것이 아니라 기능 구성 요소가 슬롯보다 먼저 렌더링된다는 것입니까?

@LinusBorg "기술적 요구 사항"이란 해결 방법이 없거나 의도 된 동작임을 의미합니까?

소품을 전달하는 vm 역할을하는 컨테이너를 만들어야합니까? 예를 들어 디자인은 다음과 같이 변경됩니다.

// before
<parent-component>
  <child-component />
</parent-component>

// after
<vm-container>
   <parent-component>
     <child-component />
   </parent-component>
<vm-container>

그러나 위의 예는 부모 구성 요소의 본질이 이미 자식에게 제공하는 데 필요한 모든 데이터를 수반했기 때문에 불필요하게 부풀려 보입니다. 그러나 나는 토론의 여지가 있습니다. 이것이 너희들이 제안하는 것입니까?

vm-container 은 슬롯이 app 컨텍스트에서 렌더링되기 때문에 아무것도 변경하지 않습니다.

"기술적 요구 사항"이란 해결 방법이 없거나 의도 된 동작임을 의미합니까?

이 동작은 기능 구성 요소가 작동하는 방식의 결과입니다. 다음 구성 요소 세트를 고려하십시오.

<!-- template of a `parent` component -->
<template>
  <Child>
    <functional />
  </Child>
</template>

기능적 구성 요소를 다른 구성 요소의 슬롯에 전달할 때 하위 구성 요소가 결과 vNode를 슬롯 콘텐츠로받을 수 있도록 하위 구성 요소로 전달되기 전에 렌더링해야합니다. (*)

위의 예에서 이는 <functional> 구성 요소가 렌더링되는 순간에 사용 가능한 부모가 <child> 가 아니라 외부 구성 요소 ( <parent> )임을 의미합니다.

결과적으로 기능적 구성 요소에 사용할 수있는 유일한 주입은 <parent> 에서도 사용할 수있는 주입입니다.

(*) : 이것이 바로 Virtualdom의 현재 구현이 기능적 구성 요소와 함께 작동하는 방식입니다. 이를 변경하려면 내부 메커니즘을 상당히 많이 변경해야합니다.

@posva @LinusBorg 알겠습니다. 설명해 주셔서 감사합니다.

따라서 이러한 요구 사항으로 인해 기능 구성 요소와 함께 제공 / 주입을 사용하는 유일한 방법은 app 컨텍스트에서 제공되는 props를 갖는 것입니다.

이 제약은 문서에서 명확해질 것이라고 확신합니다. 수행하거나 명확히해야 할 다른 사항이 없으면 계속 진행하여이 문제를 종료하십시오. 다시 한번 감사드립니다!

슬롯의 기능적 구성 요소를 개선하는 방법을 찾을 수있을 것입니다.
그러나 지금은 @posva 및 @LinusBorg가 말한 것처럼해야합니다.

@Kingwl 열어 주셔서 감사합니다.

나는 마침내 위의 조언을 사용하여 이것을 vue-mobiledoc-editor 플러그인에 통합하려고 시도했습니다. app 인스턴스에서 구성 요소를 사용해야하는 경우 내가 예상하는 한 가지 문제는 사용 된 중첩 구성 요소에 유연성을 허용하기가 더 어렵다는 것입니다.

예를 들어 앱 인스턴스에 이미 등록 된 구성 요소를 내 보내야합니다.

...

export default Vue.extend({
  render (h) {
    return (
      <div>
        <ParentComp>
          <ChildFuncComp/>
        </ParentComp>
      </div>
    )
  },

  provide () { // data that needs to be injected into functional components 
    return {
       msg: 'hello'
    }
  },

  components: {
    ParentComp,
    ChildFuncComp
  }
})

그런 다음 내 이해에서 사용자가 플러그인을 사용할 때 다음과 같습니다.

// template
<div id="app">
   <div id="#someWhereInApp" />
</div>

// script 
import SuperCoolComponent from 'SuperCoolComponent' 

export default {
   mounted () {
    this.$once('mounted', () => new SuperCoolComponent().$mount('#someWhereInApp'))
    this.$emit('mounted')
  }
}

내 구현이 정확하면 사용하려는 구성 요소를 개별적으로 가져오고 등록 할 수 없기 때문에 기능 구성 요소와 함께 제공 / 주입의 사용이 심각하게 제한됩니다.

대신 전체 구성 요소를 사용하여 제공 / 주입을 지원합니다.

나는 이것을 해결하려고 노력하고있다
긴 과정 일 수도 있습니다 🌚

@Kingwl 해결할 수 있었습니까?

v3에서이 문제를 해결할 계획이 있습니까?

예를 들어 v-for를 렌더링 함수로 추상화하려고하지만 내 자식은 기능적 구성 요소 일 수 있습니다 (따라서 렌더링 함수에 들어갈 때 이미 렌더링되어 복제 할 수 없습니다).

모든 업데이트?