If you're just getting started with this series of Vue.js posts, you should start with the Vue.js Starter Page.
You know all that stuff in the last post about the child broadcasting events up to the parent? That was a bunch of bullshit, turns out the REAL way to do all that stuff is with an Event Bus. Here's how:
<!--main.js-->
import Vue from 'vue'
import App from './App.vue'
export const bus = new Vue();
new Vue({
el: '#app',
render: h => h(app)
})
<-- end main.js-->
<!--Header.vue template-->
<!-- thanks to https://www.youtube.com/watch?v=6-us2D7GQCk&list=PL4cUxeGkcC9gQcYgjhBoeQH7wiAyZNrYa&index=21 -->
<template>
<header>
<h1 v-on:click="changeTitle">{{title}}</h1>
</header>
</template>
<script>
import {bus} from '..main';
export default {
props:{
title:{
type:String
}
},
data(){
return{
title:'Vue Ninjas'
}
},
methods(){
changeTitle:function(){
//this.$emit(changeTitle,'My latest title');
bus.$emit(changeTitle,'My latest title');
}
}
}
</script>
<!-- add "scoped" attribute to style tag to ensure that only elements in this component get style applied, else it goes global -->
<style scoped>
</style>
<!-- end Header.vue-->
<!-- start Footer.vue-->
<template>
<div>
<app-header v-bind:title="title" v-on:changeTitle="updateTitle($event)"></app-header>
<app-muscles></app-muscles>
<app-footer v-bind:title="title"></app-footer>
</div>
</template>
<script>
import Header from './components/Header.vue';
import Footer from './components/Footer.vue';
import Muscles from './components/Muscle.vue';
export default {
components{
'app-header':Header;
'app-footer':Footer;
'app-muscles':Muscles;
},
name: 'app',
data () {
return {
muscles:[
{name: 'Pectoralis', area:'Chest', show:false},
{name: 'Biceps', area:'Arm', show:false},
{name: 'Triceps', area:'Arm', show:false},
{name: 'Latissimus', area:'Back', show:false},
{name: 'Quadriceps', area:'Leg', show:false},
{name: 'Soleus', area:'Calf', show:false}
],
title:"Muscle Title Here"
}
},
created(){
bus.$on('changeTitle',(data) => {
this.title = data;
})
},
methods:{
updateTitle(updatedTitle){
this.title=updatedTitle;
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
<!-- end Footer.vue-->