定義一個父組件

<template>
  <v-layout>
    <v-card contextual-style="dark" v-if="show">
      <span slot="header">
        一級主頁面
      </span>
      <div slot="body">主內容頁</div>
      <div slot="footer" :showDate="showDate">
        <div>來自主頁面</div>
        <button type="button" class="btn btn-info " @click="toggle1">去子組件並傳遞數據</button>
      </div>

    </v-card>
    <v-card contextual-style="dark" v-else
 
>
      <span slot="header">
        組件主頁
      </span>
      <div slot="body">組件內容頁</div>
      <div slot="footer">
        <div>來自組件頁面</div>
        <my-button showDate="***父組件傳遞的數據***" @toggleEvent="toggle"></my-button>
      </div>

    </v-card>

  </v-layout>
</template>

<script>
/*
 
 ============
 * Home Index Page
 * ============
 *
 * The home index page.
 */

import VLayout from ‘@/layouts/Default‘;
import VCard from ‘@/components/Card‘;
import MyButton from ‘@/components/MyButton‘;

export default {
  /**
   * The name of the page.
   */
  name: ‘home-index‘,
  data() {
    
 
return {
      show: true,
      showDate: "父子間傳過來的數據"
    }
  },
  methods: {
    toggle1(){
this.show =false;
    },
    toggle(data) {
      console.log(data)
      this.show = data;
    }
  },
  mounted() {
    // this.toggle();
  },
  /**
   * The components that the page can use.
   */
  components: {
    VLayout,
    VCard,
    MyButton
  },
};
</script>

再定義一個子組件

<template>
    <div>
        <div slot="body">{{showDate}}</div>
        <button type="button" class="btn btn-danger " @click="toggle1">去父組件</button>
    </div>
</template>
<script>
export default {
    props: ["showDate"],
    methods: {
        toggle1() {
            this.$emit(‘toggleEvent‘, "false")
        }
    }

}
</script>

將父組件的數據通過porps傳遞到子組件,子組件通過this.$emit(‘觸發的事件函數’，要傳輸的數據)

就目前來說（組件之間傳遞數據共有三種方法）：

1.通過父子組件之間的通信

2.通過vuex

3.通過路由傳參

要說的就這麽多，晚安~~~

vue實現非路由跳轉以及數據傳遞