html Vue $将事件从子模板发送到根父级（Header to App）

Posted 2021-05-10

<!--Header.vue-->
<!--click on H1 fires event ($emit), event is called "changeTitle" data (string) is named "Vue Wizzards"-->
<template>
  <header>
    <h1 v-on:click="changeTitle">{{ title }}</h1>
  </header>
</template>

<script>
  export default {
    props: {
      title: {
        type: String
      }
    }
  },
  data() {
    return {
    }
  },
  methods: {
    changeTitle: function() {
      this.$emit('changeTitle', 'Vue wizzards');
    }
  }
</script>

<!--App.vue-->
<!--when the changeTitle is read it creates it's own function named "updateTitle" which within the $event has also the data which was named 'updateTitle'-->
<!--in the parameter-->

<template>
  <div>
    <app-header v-bind:title="title" v-on:changeTitle="updateTitle($event)"></app-header>
    <app-ninjas v-bind:ninjas="ninjas"></app-ninjas>
    <app-footer v-bind:title="title"></app-footer>
  </div>
</template>

<script>
  import Header from './components/Header.vue';
  import Footer from './componenets/Footer.vue';
  import Ninjs from './components/Ninjas';
  
  export default {
    components: {
      'app-header': Header,
      'app-footer': Footer,
      'app-ninjas': Ninjas
    },
    data() {
      return {
        title: "Vue Ninjas"
      }
    },
    methods: {
      updatetitle: fucntion(updatedTitle) {
        this.title = updatedTitle;
      }
    }
      
    }
    }
  }
</script>