1、props和$emit控制弹窗显示隐藏
< template>
< div class = "about" >
< a- button type= "primary" @click= "show = true" > 打开弹窗 < / a- button>
< popup : show= "show" @change= "show = false" > < / popup>
< / div>
< / template>
< script>
import popup from "../components/popup" ;
export default {
data ( ) {
return {
show: false ,
} ;
} ,
components: {
popup,
} ,
} ;
< / script>
< template>
< div>
< a- modal
v- model= "show1"
title= "Basic Modal"
@cancel= "handleOk"
@ok= "handleOk"
>
< p> Some contents... < / p>
< p> Some contents... < / p>
< p> Some contents... < / p>
< / a- modal>
< / div>
< / template>
< script>
export default {
data ( ) {
return {
} ;
} ,
props: [ "show" ] ,
computed: {
show1: {
get ( ) {
return this . show;
} ,
set ( ) {
} ,
} ,
} ,
methods: {
handleOk ( e ) {
this . $emit ( "change" , false ) ;
} ,
} ,
} ;
< / script>
v-model控制弹窗显示隐藏
< template>
< div class = "about" >
< a- button type= "primary" @click= "show = true" > Open Modal < / a- button>
< popup v- model= "show" > < / popup>
< / div>
< / template>
< script>
import popup from "../components/popup" ;
export default {
data ( ) {
return {
show: false ,
} ;
} ,
components: {
popup,
} ,
} ;
< / script>
< template>
< div>
< a- modal
v- model= "show1"
title= "Basic Modal"
@cancel= "handleOk"
@ok= "handleOk"
>
< p> Some contents... < / p>
< p> Some contents... < / p>
< p> Some contents... < / p>
< / a- modal>
< / div>
< / template>
< script>
export default {
data ( ) {
return {
} ;
} ,
model: {
prop: "show" ,
event: "change" ,
} ,
props: [ "show" ] ,
computed: {
show1: {
get ( ) {
return this . show;
} ,
set ( ) {
} ,
} ,
} ,
methods: {
handleOk ( e ) {
this . $emit ( "change" , false ) ;
} ,
} ,
} ;
< / script>
$refs直接调取子组件的方法
< template>
< div class = "about" >
< h1 @click= "$router.push('./test')" > This is an about page< / h1>
< a- button type= "primary" @click= "$refs.pop.init()" > Open Modal < / a- button>
< popup ref= "pop" > < / popup>
< / div>
< / template>
< script>
import popup from "../components/popup" ;
export default {
components: {
popup,
} ,
} ;
< / script>
< template>
< div>
< a- modal
v- model= "show"
title= "Basic Modal"
@cancel= "handleOk"
@ok= "handleOk"
>
< p> Some contents... < / p>
< p> Some contents... < / p>
< p> Some contents... < / p>
< / a- modal>
< / div>
< / template>
< script>
export default {
data ( ) {
return {
show: false ,
} ;
} ,
methods: {
init ( ) {
this . show = true ;
} ,
handleOk ( e ) {
this . show = false ;
} ,
} ,
} ;
< / script>