0

Дело в том что эти 2 компонента вообще никак между собой не связанны, и им лучше сделать разные области видимости и отдельно отлаживать. Один отвечает за поиск и заказ товара. Вложенный за связь с оператором. И на странице они расположены один в другом. При попытке это сделать - при подключеннии второго компонента выдается ошибка - не найден компонент с таким id. Сделать в в виде подключаемого компонента нельзя - есть страницы с Vue, есть просто генерируемые видами Yii2. Но компонент обратной связи должен быть на тех и на других. На страницах без Vue - он нормально работает.

<script>

new Vue({
    el: '#component_first'
    ...
    });

new Vue({
    el: '#component_second'
    ...
});

</script>

<div id="component_first">
    ...
    <div id="component_second">
        ...
    </div>
    ...
</div>
3
  • Возможно, если написать const ComponentSecond = { /* конфиг объекта вложенного компонента, кроме свойства el */ }; до выполнения new Vue({ el: '#component_first', .... });. Ну, либо глобальная регистрация компонента через Vue.component. А вот корневой компонент вкладывать в другие компоненты - низзя, насколько знаю... там начинается какая-то хрень с регистрацией родителя, и все валится. Монтировать внутрь шаблона тоже не имеет смысла, т.к. при следующем же рендере библиотека грохнет вложенное вью-приложение заменив DOM-ноду.
    – yar85
    15 окт 2021 в 13:41
  • выход - создать компонент, который будет включать в себя оба эти и уже монтировать его..... еще, можно попробовать, внутри первого компонента, какому-то элементу установить id второго компонента
    – Dmytro
    15 окт 2021 в 14:17
  • @Дмытрык, «создать компонент, который будет включать в себя оба эти» - суть данного вoпроса как раз в том, как корневой компонент отдельного вью-приложения подключить дочерним. У тебя получалось такое? Интересно было бы взглянуть на то как такой фокус провернуть (если покажешь ответом, с удовольствием добавлю баллов наградой). А если использовать некорневой компонент (т.е., не инстанцируя через new Vue), то ясно-понятно что все легко получится :)
    – yar85
    15 окт 2021 в 14:44

1 ответ 1

0

У меня только так получается. Но надо будет написать какую-нибудь абстракцию, чтобы компоненты ничего не знали друг о друге

const second = new Vue({
  el: '#second',
  data() {
    return {
      btnName: 'second'
    }
  },
  methods: {
    handlerSecond() {
      console.log('second')
    }
  },
});

const first = new Vue({
  el: '#first',
  data() {
    return {
      btnName: 'first'
    }
  },
  methods: {
    handlerFirst() {
      console.log('first')
    }
  },
  mounted() {
    const id = second.$el.getAttribute('id')
    const replaceElem = document.getElementById(id)
    this.$el.replaceChild(second.$el, replaceElem);
  }
});
div {
  border: 1px solid;
  max-width: 200px;
  padding: 10px;
  margin: 10px;
  cursor: pointer;
}
 <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<div id="first" @click="handlerFirst">
  {{btnName}}
  <div id="second" @click.stop="handlerSecond">{{btnName}}</div>
</div>

1
  • @yar85 жду критику)
    – Dmytro
    22 окт 2021 в 5:52

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.