例項：child.vue檔案,呼叫parent.vue的資料

parent.vue如下：

<template>  
  <div>  
    <div class="parent">  
      <p>父元件</p>  
      <p v-text="userInfo.userName"></p>  
      <router-link to='/parent/child'></router-link>
      <router-view :message="userInfo"
 
></router-view>  //這裡傳引數userInfo給子元件，子元件用message呼叫
    </div>  
  </div>  
</template> 

<script>  
  export default {  
    data () {  
      return {  
        userInfo: {  
            userName: '阿水12344',  
            age: 12  
        }  
      }  
    }  
  }  
</script
 
>  

child.vue如下：

<template>  
  <div class="child">  
    <p>子元件</p>  
    <p v-text="message.age"></p>  
  </div>  
</template>  

<script>  
  export default {  
     props: ['message']  // 子元件獲取父元件的資料
  }  
</script>  

重點：

父元件：
 1. <router-view
 
 :message="userInfo"></router-view> 

子元件：
 1. <p v-text="message.userName"></p>   
 2. props: ['message']

補充：

 1. 當message改名為user-info（帶“-”的形式）時，子元件呼叫“userInfo“駝峰法 

 <router-view :user-info="userInfo"></router-view> 
 <p v-text="userInfo.userName"></p>     
 props: ['userInfo']

 2. 子元件獲取時可設定型別,如：設定為布林型

 props: {
    active: {
        type: Boolean
    }
 }

元件間資料通訊：使用自定義函式

<template>
    <div v-show=‘active‘>看得見</div>
    <outdiv @navActive="handleNavActive"></outdiv> // 自定義navActive，在outdiv元件中呼叫
</template>

<script>
    export default {
        data () {
            return active
        },
        methods: {
            handleNavActive (status) { // 自定義函式，回撥函式，獲得otrdiv返回值
                if (status) {this.active = ture}
                else {this.active = false}
            }
        }
    }
</script>

outdiv元件的定義：

<template>
    <button @click="handleNavFlod"></button>
</template>

<script>
    export default {
        data () {
            return {
                value
            }
        },
        methods: {
            handleNavFlod () {
                this.value = !this.value
                if (this.value) {this.$emit('navActive',true)}
                else {this.$emit('navActive',false)}  // 呼叫自定義函式
            }
        }
    }
</script>