父子間的通訊傳值是 vue 中的一個重要的內容和掌握點。

  *vue2.0 推薦使用 vuex,全域性進行狀態管理。（後面再講）

  首先講一下遇到的 需求背景：

解釋一下：
  元件之間的關係：

 <div id="app">
    <loginPage v-on:showState="changeState" v-if="loginShow" :fromParent="fromParent"></loginPage>
    <div class="web-content" v-if="webShow">
      <phHeader
 
 :headerUserName="headerUserName"></phHeader>
      <div>
        <router-view></router-view>
      </div>
      <phFooter></phFooter>
    </div>    
  </div>

1、子元件 login 傳引數給父元件 app.vue

$emit

用法：vm.$emit( event, […args] )，觸發當前例項上的事件。

子元件中程式碼

submitForm:function(formName){
    //與父元件通訊傳值
    this.$emit('showState', [this.loginShow,this.formName.user])
}

submitForm 是一個點選事件， showState 是一個方法，後邊是多個引數寫法。

父元件中程式碼：

首先需要在 子元件中繫結 showState 事件，前一個 showState 是在子元件定義的，後面的 changeState 是新定義的方法。

 <loginPage v-on:showState="changeState" v-if
 
="loginShow" :fromParent="fromParent"></loginPage>

changeState:function(data){
      //console.log(data)
      if(data[0] === false){
        console.log('執行')
        this.webShow = true;//顯示web應用內容
        this.loginShow = false;//隱藏login元件
        this.headerUserName = data[1];//賦值headerUserName
      }
    }

然後就能在方法中獲得子元件傳來的引數：
data：[false, "allen"]0: false1: "allen"length: 2__proto__: Array(0)

2、父元件 app.vue 傳引數給子元件 ph-Header

props

父元件中程式碼：

引入在父元件中的 ph-Header 子元件需要繫結 headerUserName,前一個 headerUserName 是子元件中定義的。後一個才是父元件中的引數。

<phHeader :headerUserName="headerUserName"></phHeader>

export default {
  name: 'app',
  data () {
    return {
      loginShow: true,
      webShow: false,
      fromParent:'——來自父元件',
      headerUserName: '使用者名稱'
    }
  },
  components:{
    phHeader,
    phFooter,
    loginPage
  },
  methods:{
    changeState:function(data){
      console.log(data)
      if(data[0] === false){
        console.log('執行')
        this.webShow = true;//顯示web應用內容
        this.loginShow = false;//隱藏login元件
        this.headerUserName = data[1];//賦值headerUserName
      }
    }
  }
}

子元件中程式碼

子元件中需要接收 headerUserName

    export default {
        name: '',
        data () {
            return {

            }
        },
        props:[
            'headerUserName'
        ]
    }

希望對那麼可愛，還來看我部落格的你 有些許的幫助！