vue 父子组件之间的通信

1，父组件传递数据给子组件(子组件通过props接收数据)
父组件

 

<template>
  <div class="hello">
    <div id="app">
      <HeaderDiv :logo="logo" :navs="navs"></HeaderDiv>
    </div>
  </div>
</template>

<script>
import HeaderDiv from '@/components/header-nav'
export default {
  data(){
    return {
      logo: 'HELLO WORLD',
      navs: [
        {li: '主页'},
        {li: '日志'},
        {li: '说说'},
        {li: '主页'},
        {li: '相册'}
      ]
    }
  },
  components:{
    HeaderDiv
  }
}
</script>
<style scoped>

</style>

 

通过v-bind:prop 这种形式来动态传递数据，即：logo="logo",后面跟着传递的数据

子组件

<template lang="html">
   <header class="header">
     <div id="logo">
       {{logo}}
     </div>
     <ul class="nav">
       <li v-for="nav in navs">{{nav.li}}</li>
     </ul>
   </header>
</template>
<script>
   export default{
     props: {
       navs: {
         type: Array,
         default: []
       },
       logo: {
         type: String,
         default: ''
       }
     }
   }
</script>
<style>
</style>

子组件通过props方法，接收验证数据，如果navs传递过来，就展示接收到的数据，否则显示默认值[]。同理，logo也是一样

2，子组件传递数据给父组件(通过自定义事件)

子组件

<template lang="html">
   <section>
     <div class="login">
       <label>
         <span>用户名: </span>
         <input v-model="username" @change="setUser">
       </label>
     </div>
   </section>
</template>
<script>
   export default{
     data(){
       return {
         username: ''
       }
     },
     methods: {
       setUser: function(){
         this.$emit('transferUser',this.username)
       }
     }
   }
</script>
<style>
</style>

父组件通过监听自定义事件，当子组件里的$emit(eventName)触发自定义事件的时候，父组件执行相应的操作

子级$emit 后会触发自己身上的某一个自定的方法，这个方法对应函数在父级的身上

<template>
   <div id="app">
     <HeaderDiv @transferUser="getUser"></HeaderDiv>
     <p>用户名: {{user}}</p>
   </div>
</template>

<script>
import HeaderDiv from '@/components/header-nav'
export default {
  data(){
    return {
      user: ''
    }
  },
  methods: {
    getUser(msg){
      this.user = msg
    }
  },
  components:{
    HeaderDiv
  }
}
</script>
<style scoped>

</style>