-------------------------- Component Header.vue -----------------------------
<template>
<div>
<h1>{{ companyName }}</h1> //Recieves Variable from App.vue
<h2>{{ companySlogan }}</h2> //Recieves Variable from App.vue
<p>{{ companyUrl }}</p> //Recieves Variable from App.vue
</div>
</template>
<script>
export default {
name: 'Header', //Template Name
props: { Recieves Variables from App.vue
companyName: String,
companySlogan: String,
companyUrl: String
}
}
</script>
-------------------------- Body Header.vue -----------------------------
<template>
<div>
<p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</template>
<script>
export default {
name: 'Body',
props: { //Recieves no Data
}
}
</script>
-------------------------- Footer Header.vue -----------------------------
<template>
<div>
<p> 2019 All Rights Reserved</p>
</div>
</template>
<script>
export default {
name: 'Footer',
props: { //Recieves no Data
}
}
</script>
-------------------------- File App.vue -----------------------------
<template>
<div id="app">
<Header :companyName="companyName" :companySlogan="companySlogan" :companyUrl="companyUrl" /> //Header Component
<Body></Body> //Body Component
<Footer /> //Footer Component
</div>
</template>
<script>
//Components to import
import Header from './components/Header.vue';
import Body from './components/Body.vue';
import Footer from './components/Footer.vue';
export default {
name: 'app',
data(){
return {
companyName : "Wk Konsult", //Variable passedt to Header Component
companySlogan : "Wissen, das Trägt", //Variable passedt to Header Component
companyUrl : "www.wk-consult.com" //Variable passedt to Header Component
}
},
//Components to import
components: {
Header,
Body,
Footer,
}
}
</script>
<style>
</style>