Vue Nuxt: проблема с передачей (привязкой) динамических данных от родительского компонента к дочернему

#vue.js #nuxt.js

Вопрос:

Я новичок в Vue и изо всех сил пытаюсь передать динамические данные от родительского компонента к дочернему через props. Мой родительский компонент должен передать логическое значение (isModalVisible) дочернему компоненту через видимую опору. В родительском элементе значение isModalVisible изменяется (с false на true) при нажатии кнопки. Но дочерний компонент сохраняет начальное значение. Насколько я понял, data() выполняется при создании компонента и при изменении любого связанного значения (в данном случае видимого), но этого не происходит. Кто-нибудь может помочь мне выяснить, чего мне не хватает?

Родительский компонент:

 <template>
<div>
   {{ isModalVisible }}
   <CoursesModal :visible="isModalVisible" />
   <button @click="showModal" title="Courses">
      Courses
   </button>
</div>
</template>
<script>
import CoursesModal from "../components/modals/Courses.vue";
export default {
  components: {
    CoursesModal
  },
  data() {
    return {
      isModalVisible: false
    };
  },
  methods: {
    showModal() {
      this.isModalVisible = true;
    },
    closeModal() {
      this.isModalVisible = false;
    }
  },
};
</script>

Дочерний (модальный) компонент:

 <template>
  <div>
    {{ visible }}
  </div>
</template>

<script>
export default {
  components: {
    props: {
      visible: {
        type: Boolean,
        default: true
      }
    }
  },

  data: function() {
    return {
      visible: false,
    };
  }
};
</script>

Я тоже пытался это сделать

 return {
   visible: this.visible,
};

но это значение не определено.

Мой пакет.json:

 "dependencies": {
   "core-js": "^3.9.1",
   "nuxt": "^2.15.3"
}

1. если у вас есть реквизит с именем visible , не сохраняйте свойство данных с точным именем. используйте только значение prop, вам не нужно это свойство данных в дочернем компоненте

2. Кроме того, когда ваш реквизит изменяется, ваше свойство данных не должно изменяться, вы можете напрямую использовать значение реквизита для отслеживания изменений и действовать соответственно.

3. @Towkir Я попытался удалить функцию данных, но затем компилятор выдает ошибку «Свойство или метод «видимый» не определен в экземпляре, но на него ссылаются во время визуализации».

Ответ №1:

Я думаю, что вы ошибаетесь в свойстве компонентов. Свойство components не имело свойства props, и оно используется для регистрации компонента. Вы можете прочитать дальше здесь и здесь

Вот правильный способ использования реквизита:

 <template>
  <div>
    {{ visible }}
  </div>
</template>

<script>
export default {
  // removed the components and data property
  props: {
    visible: {
      type: Boolean,
      default: true
    }
  }
};
</script>