Блог

Я столкнулся со следующей проблемой во время работы над проектом Vue 2.6.x, и я просто не могу понять, что происходит не так :/

Надеюсь, приведенный ниже пример ясно объясняет мою проблему.

Контекст:

• У меня есть родительский компонент, у которого есть слот по умолчанию, и я хотел бы отобразить некоторые материалы в слоте по умолчанию этого компонента.
• Родительский компонент содержит два дочерних компонента, оба из которых имеют именованный слот под названием «содержимое». Эти дочерние компоненты вложены в родительский элемент, первый отображает второй в своем слоте #content, а второй отображает слот #по умолчанию для родительского элемента в своем слоте #content.

Наблюдение:

• Реактивность внутри родительского слота по умолчанию нарушается до тех пор, пока имена слотов двух вложенных дочерних компонентов совпадают. (Если бы мы дважды использовали один из компонентов WithContentSlot, это дало бы тот же результат).

Ожидаемый результат:

• счетчик в слоте #по умолчанию родителя также должен увеличиваться при нажатии кнопки

Пожалуйста, сообщите мне, если у вас есть какие-либо идеи о том, что происходит не так, или если вы знаете обходной путь. В моем реальном проекте я работаю с кучей компонентов без визуализации, которые раскрывают часть своей логики через прорези в их слоте #по умолчанию, чтобы быть аккуратными и многоразовыми, но эта ошибка сводит меня с ума, так как, если я вложу любые два из них, я столкнусь с этой проблемой.

 const WithContentSlotOne = Vue.extend({
  template: `<div><slot name="content"/></div>`,
});

const WithContentSlotTwo = Vue.extend({
  template: `<div><slot name="content"/></div>`,
});

const Parent = Vue.extend({
  components: {
    WithContentSlotOne,
    WithContentSlotTwo
  },
  template: `
  <with-content-slot-one>
        <template #content>
            <with-content-slot-two>
                <template #content>
                    <slot />
                </template>
            </with-content-slot-two>
        </template>
  </with-content-slot-one>
`,
});


const app = new Vue({
  components: {
    Parent
  },
  el: "#app",
  template: `
  <div>
        <div>count: {{ counter }}</div>
        <button @click="counter  ">
          increment
        </button>
        <Parent>
            count: {{ counter }}
        </Parent>
  </div>`,
  data() {
    return {
      counter: 0
    };
  },
}); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.12/vue.js"></script>
<div id="app" />