Как передать данные в отдельные файловые компоненты в Vue.js?

Question

У меня есть один компонент файла header.vue:

<template> 
    <h1>{{text}}</h1> 
</template> 

<script> 
    export default { 
    data() { 
     return { 
     text: 'Header text', 
     }; 
    }, 
    }; 
</script> 

Я требую это в моем коде следующим образом

const Header = require('components/header.vue'); 

И называют это:

const header = new Vue({ 
    el: '#header', 
    data: { 
    text: 'New header text', 
    }, 
    render: h => h(Header), 
}); 

компонент визуализируется, но текст говорит Header text вместо New header text. Зачем?

Answer 1

Я думаю, что может быть два пути решения этого:

1. вы можете передать заголовок, как props

Чтобы пройти реквизита вы должны сделать следующие изменения в header.vue:

<script> 
    export default { 
    props: ['text'], 
    }; 
</script> 

И назовите его:

const header = new Vue({ 
    template: '<header :text="text" />', 
    data: { 
    text: 'New header text', 
    } 
}); 

2. Вы можете иметь заголовок как переменную vuex и использовать ее в компоненте header.

Answer 2

У вас есть два отдельных компонента: компонент заголовка и созданный вами анонимный компонент (с new Vue()). Анонимный компонент отображает компонент Header в качестве его дочернего элемента. Оба компонента имеют отдельные свойства data; родитель имеет text = 'New header text', а у ребенка text = 'Header text'.

Есть два способа (с верхней части моей головы), что вы можете достичь этого:

1. Продлить компонент заголовка и переопределить его свойство text данных с новым значением:

const Header = require('components/header.vue'); 
const HeaderComp = Vue.extend(Header); 

const header = new HeaderComp({ 
    el: '#header', 
    data: { 
    text: 'New header text', 
    }, 
}); 

2. Сделав text a prop вместо этого, вы сможете передавать данные до ребенка из родителя:

header.vue

<script> 
    export default { 
    props: ['text'], 
    }; 
</script> 

использование

const Header = require('components/header.vue'); 

// Using render function 

const header = new Vue({ 
    el: '#header', 
    render: h => h(Header, { 
    props: { 
     text: 'New header text', 
    }, 
    }), 
}); 

// Using template 

const header = new Vue({ 
    el: '#header', 
    components: { 
    Header, 
    }, 
    template: '<header text="New header text"/>', 
});