Циркулярные ссылки между компонентами Vue - PullRequest
Новая
       12

Циркулярные ссылки между компонентами Vue

1 голос
/ 20 апреля 2019

Я создал два компонента (A и B).Я пытаюсь сделать их рекурсивными.Таким образом, CompA вызывает ComB, CompB вызывает CompA и так далее: 

Page -> CompA -> CompB -> CompA -> CompB -> ...

Это мой CompA.Vue 

<CompB></CompB>

и его script: 

import CompB from './CompB';
export default {
    name: "CompA",
    components:{CompB},
    props:['items']
 },
 beforeCreate() {
        this.$options.components.CompB = require("./CompB").default;
    },

и это CompB.Vue : 

<v-comp-a :items="test"></v-comp-a>

и его script: 

 import CompA from '../components/CompA'
export default {
    name: "v-comp-b",
    components:{'v-comp-a':CompA},
    props: {
        label: {
            typ:String,
            required:true
        },
        properties:{
            type:Array,
            required:true
        }
    },

Итак, главная страница загружаетсяс CompA и я могу позвонить CompB оттуда, но проблема в том, что я не могу позвонить CompA с CompB.Я получаю эту ошибку: Неизвестный пользовательский элемент: v-comp-a вы правильно зарегистрировали компонент?

Я также импортировал оба компонента в App.Vue : 

import CompA from './components/CompA'
import CompB from './components/CompB'

и в сценарии: 

components: {
   CompA,
   CompB
}

, и это главная страница, которая передает данные: 

<v-comp-a :items="items"></v-comp-a>

Я уже видел этот вопрос.и прочитайте эту документацию .Я пытался показать импорт только потому, что он будет очень длинным, я также использовал CompA вместо v-comp-a.Это не помогло.

Пожалуйста, помогите.Я начинаю терять это: [

1 Ответ

1 голос
/ 20 апреля 2019

У вас довольно много синтаксических ошибок: в CompA.vue :

  • beforeCreate() должно быть внутри экспорт по умолчанию
  • Вы импортируете CompB в хук beforeCreate, поэтому удалите другой импорт
  • Не объявлять ComB в компонентах
  • (после последней скобки все еще есть запятая, но я думаю, что это не так в реальном проекте) 

export default {
  name: "CompA",
  props:['items'],
  beforeCreate() {
    this.$options.components.CompB = require("./CompB.vue").default;
  }
}

Оставьте CompB.vue как есть, и вы увидите, что ошибка исчезла.

Теперь они рекурсивные, но в основном CompB находится в CompA находится в CompB ...
Таким образом, создание их рекурсивным должно дать рекурсивную ошибку.

...