vue2.0子组件调用父组件的数据

---

实例：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>