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

vue+vux 父组件控制子组件弹层_第1张图片 

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

你可能感兴趣的:(vue+vux 父组件控制子组件弹层)