vue js 2.x, вложенный v-слот {scoped slot} не работает с дочерними элементами

Question

Я пытаюсь использовать вложенный слот v в vue js, но pb заключается в том, что компонент дочернего компонента C не получает значение «valueB». Также компонент C не получает значение «valueA».

Ссылка для воспроизведения

https://codesandbox.io/s/sweet-diffie-x3tq0?f

Мой родитель. vue

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<div id="app">
      <component-a>
      <template v-slot:b="{valueA}">
        <component-b :value=valueA>
            <template v-slot:C="{valueB}">
              <component-c :value=valueB >
               </component-c>
            </template>
        </component-b>
      </template>
      </component-a>
</div>

Мои шаблоны дочерних компонентов

 Vue.component('ComponentA', {
  template: '<slot name="b" :value="valueA"/>',
  data: function() {
    return {
    valueA: 1
    }
  }
})

Vue.component('ComponentB', {
  template: '<slot name="c" :value="valueB"/>',
  props: ["valueFromA"],
  data: function() {
    return {
    valueB: 0
    }
  }
})

Vue.component('ComponentC', {
  template: '<div> {{ valueFromB}}</div>',
  props: ["valueFromB"],
  data: function() {
    return {
    }
  }
})

new Vue({
  el: '#app',
  data: () => ({
    valueA: '50'
  })
})

Answer 1

Вот как этого можно достичь.

Свойства

Vue.config.productionTip = false;
Vue.config.devtools = false;
Vue.component('ComponentA', {
  template: `<div>
    <h4>component A value from itself: {{valueA}}</h4>
    <slot name="b" :value="valueA"/>
  </div>`,
  data: () => ({
    valueA: 1
  })
})
Vue.component('ComponentB', {
  template: `<div>
    <h4>component B value from A: {{value}}</h4>
    <h4>component B valueB from itself: {{valueB}}</h4>
    <slot name="c" :value="value" :valueB="valueB"/>
  </div>`,
  props: {
    value: {
      type: [String, Number]
    }
  },
  data: () => ({
    valueB: 2 + 2
  })

});
Vue.component('ComponentC', {
  template: `<div>
  <h4>component C valueA from component A: {{ valueA }}</h4>
  <h4>component C value from component B: {{ value }}</h4>
  <h4>component C valueB from component B: {{ valueB }}</h4>
  <h4>component C valueC from itself: {{ valueC }}</h4>
  <slot></slot>
</div>`,
  props: {
    value: {
      type: [String, Number]
    },
    valueA: {
      type: [String, Number]
    },
    valueB: {
      type: [String, Number]
    }
  },
  data: () => ({
    valueC: -2
  })
});

new Vue({
  el: '#app', 
  data: () => ({
    testAppInC: 'this is a test...'
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>

<div id="app">
  <component-a v-slot:b="foo">
    <component-b :value="foo.value" v-slot:c="bar">
    <!-- Or: <component-b v-bind="foo" v-slot:c="bar"> -->
    <!-- Or: <component-b v-bind="{value: foo.value}" v-slot:c="bar"> -->
      <component-c v-bind="{...bar, valueA: foo.value}">{{testAppInC}}</component-c>
      <!-- above line is equivalent to:
      <component-c v-bind="bar" :value-a="foo.value">{{testAppInC}}</component-c>
  Or: <component-c :value="bar.value" :value-b="bar.valueB" :value-a="foo.value">...
  Or: <component-c v-bind="{value: bar.value, valueB: bar.valueB, valueA: foo.value}">...

  Anything from app level is still available at any other level.
      -->
    </component-b>
  </component-a>
</div>

component-b доступны внутри component-c, как бы вы ни назвали его в <template v-slot:c="someName">. В приведенном выше случае whatever.