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界面，点击父组件的弹窗按钮，子组件弹窗显示，点击空白处，子组件弹窗隐藏

 

转载于:https://www.cnblogs.com/cjh1111/p/7002151.html