vue+vux 父組件控制子組件彈層

知識點用到了vue父子組件之間的傳值，以及使用watch和v-model控制vux中XDialog組件。

須要注意的問題:

1.父組件向子組件傳值使用的是props（單向傳值），子組件建立props，而後建立一個名爲invitor的屬性，父組件對其賦值便可，可是單向傳值，子組件不能經過改變props的屬性，直接去改變父組件的值。

2.子組件向父組件傳值，實際是在父組件自定義了一個事件，子組件去調用這個自定義事件並傳值。

this.$emit('changingType','false');

3.watch的使用和XDialog組件的使用

如下是具體代碼

子組件

<template>
  <div>
    <x-dialog class="invitorMask" hide-on-blur v-model="showing"  @on-hide="hide">
        子組件彈窗
    </x-dialog>
  </div>
</template>

<script>
  import {XDialog} from 'vux'
  export default {
    components: {
      XDialog
    },
    props:['invitor'],
    data () {
      return {
        showing:this.invitor,//由於props是單向傳值，因此須要新聲明一個局部變量，並將invitor初值賦值給它
      }
    },
    watch:{
      invitor(cur){//監聽invitor值的變化
        console.log('currentVal:'+cur)
        if(cur == true){//當父組件傳遞值爲true是，則顯示
           this.showing = true;
        }
      },
    }
    ,
    methods: {
      hide(){//彈層消失事件
          this.$emit('changingType','false');//調用父組件的自定義事件，並傳值
      }
    }
  }

</script>

父組件

<template>
  <div style="text-align: center">
    <div style="margin-bottom: 50px">父組件</div>
    <a v-model="isShow"  @click="showlDialog">彈窗</a>
    <!--動態的向子組件賦值-->
    <Invite :invitor="isShow" @changingType="showlDialog"> </Invite>
  </div>
</template>

<script>
  import Invite from '@/pages/s/invite/Index.vue' //引入子組件

  export default {
    components: {
      Invite  //註冊子組件
    },
    data () {
      return {
        isShow:false,
      }
    },
    methods: {
      showlDialog(data){
          console.log(data)
        if(data == 'false'){
          this.isShow = false;
        }else{
          this.isShow = true;
        }
         console.log(this.isShow)
      },

    }
  }
</script>

demo界面，點擊父組件的彈窗按鈕，子組件彈窗顯示，點擊空白處，子組件彈窗隱藏