vueJS 中引用子组件modal 的问题

Question

modal 组件:

<template>  
    <Modal v-if="showFlag">
    </Modal>
</template>

name 组件 引用 modal组件: name 组件中的一个按钮,可以弹出组件:

<Button @click="show"></Button>

最后,首页引用name组件:
<name> </name>

那么,1, 首页怎么写?

 2,怎么得到那个showFlag?
 3, template 怎么写?
 4, show 方法怎么操作?
  

Answer 1

1.首页直接引入name组件就可以，不用做其他操作，modal的显示和隐藏封装在name内部
2.<Button @click="showFlag =!showFlag"></Button> 不用定义show方法也可以，当然你也可以定义show方法

<Button @click="show"></Button>

methods: {
    show() {
        this.showFlag = !this.showFlag
    }
}

首先在data里定义showFlag这个字段