Vue: При условии, что реквизит не вводится в функциональные компоненты

Это потому, что вместо parent , child считается дочерним элементом vm (возможно, проблема). Таким образом, вам может потребоваться написать provide в vm .

Кстати, ваша скрипка использует [email protected] 😅

Алгоритм поиска для provide inject заключается в том, что дочерний элемент просматривает себя в поисках предоставленных атрибутов, а затем перебирает свою иерархию $parent в поисках предоставленных реквизитов, пока не окажется в корне.
https://github.com/vuejs/vue/blob/b182ac40697edbe8253d4bd68b6ac09e93259e1c/src/core/instance/inject.js#L59 -L59

Не удалось запустить скрипку, но когда я запустил https://jsfiddle.net/Austio/vhgztp59/7/ эту скрипку, родительский элемент $ не был определен в дочернем компоненте, когда я дошел до контекста поиска. По крайней мере, это начало, если это не проблема с рендерингом в слоты и между компонентами нет связи.

похоже, что функциональный компонент отображается до разрешения слотов

@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/

edit: @alidcastano Я обновил скрипку в вашем комментарии, так как ваш даже не использовал Vue 2

Ха-ха, извините за использование неправильной версии 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 context

Под «техническим требованием» подразумевается, что обходного пути не существует или что поведение задано?

Такое поведение является результатом того, как работают функциональные компоненты. Рассмотрим этот набор компонентов:

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

Когда вы передаете функциональный компонент в слот другого компонента, он должен быть отрисован, прежде чем он будет передан дочернему компоненту, чтобы этот дочерний компонент мог получить результирующие vNodes в качестве содержимого слота. (*)

В контексте моего примера выше это означает, что в момент рендеринга компонента <functional> доступным родительским элементом является внешний компонент ( <parent> ), а не <child> .

Следовательно, для функционального компонента доступны только те инъекции, которые доступны и в <parent> .

(*): Именно так текущая реализация виртуального мира работает с функциональными компонентами. Чтобы это изменить, потребуется изменить довольно много внутренней механики.

@posva @LinusBorg Понятно , спасибо за объяснение.

Таким образом, из-за этих требований единственный способ использовать provide / inject с функциональными компонентами - это предоставить реквизиты в контексте app .

Я уверен, что это ограничение будет разъяснено в документации. Пожалуйста, закройте эту проблему, если не нужно ничего делать или уточнять; Спасибо еще раз!

Возможно, удастся найти способ улучшить функциональную составляющую в слоте
Но на данный момент это должно быть сделано так, как сказали @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')
  }
}

Если моя реализация верна, это серьезно ограничивает использование provide / inject с функциональными компонентами, поскольку вам не разрешено индивидуально импортировать и регистрировать компоненты, которые вы хотите использовать.

Вместо этого я бы использовал полные компоненты для поддержки предоставления / внедрения

я пытаюсь решить это
возможно, это долгий процесс

@Kingwl Удалось ли вам решить эту проблему?

Планируется ли решить эту проблему в версии 3?

Например, я пытаюсь абстрагировать v-for в функцию рендеринга, но мои дочерние элементы могут быть функциональными компонентами (так что они уже отображаются при входе в функцию рендеринга, и я не могу их клонировать).

Есть обновления?