Как я могу передать данные из .js в .vue?

Question

Я пытаюсь загрузить данные в мой файл компонента .vue из его родительского файла .js.

Это мой файл .html:

<div class="modal-container">
    <section class="modal">
        <modal-component></modal-component>
    </section>
</div>

Это мой файл .js:

var modal = new Vue({
    el: 'section.modal',
    data: {
        msg: 'Hello world!'
    },
    components: {
        'modal-component': httpVueLoader('./templates/test.vue')
    }
});

Это мой файл .vue:

<template>
    <section>               
        <p class="test">{{ msg }}</p>
    </section>
</template>

Однако, когда я загружаю страницу, эта ошибка появляется в консоли, и значение «msg» остается пустым:

[Vue warn]: Property or method "msg" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

Answer 1

Здесь есть два разных экземпляра Vue. Тот, который вы создаете непосредственно с помощью new Vue, имеет свойство с именем msg. Экземпляр, соответствующий дочернему компоненту, modal-component, не имеет.

В Vue есть 3 основных типа свойств. data, computed и props.

Если у вас есть свойство, определенное для родителя в data, вы можете передать его ребенку, используя опору.

<modal-component :msg="msg"></modal-component>

В вашем файле .vue вам потребуется определить msg как реквизит.

props: ['msg']

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

Документация: https://vuejs.org/v2/guide/components.html#Passing-Data-to-Child-Components-with-Props

Не желая мутить воду, этот конкретный пример может быть лучше подан с использованием slot, но поскольку это всего лишь пример, трудно точно сказать, будет ли это на самом делесоответствующий.

Обновление:

В полном объеме файл test.vue будет:

<template>
    <section>               
        <p class="test">{{ msg }}</p>
    </section>
</template>

<script>
export default {
  name: 'modal-component',
  props: ['msg']
}
</script>