比如写一个公共组件,类似弹窗,通过$emit传递事件
<template>
<div class="notice-contain">
<div class="dialog" v-if="isNotice">
<div class="dialog-center">
{{message}}
</div>
<div class="dialog-footer" @click="closeNotice()">
确定
</div>
</div>
</div>
</template>
<script>
export default {
props: { //通过props接收父组件传值
isNotice:{
name: false,
default: Boolean
},
message: {
name: '',
default: String,
},
},
data () {
return {
isNotices:false,
}
},
methods: {
closeNotice(){
this.$emit('closeNotice',this.isNotices) //点击确定传值给父组件
}
}
}
</script>
父组件传值接收值
<notice :message="message" :isNotice="isNotice" @closeNotice="getisNotice"></notice>
import notice from '../components/notice.vue'
export default {
components: {
'notice': notice
}
data() {
return {
message:'',
isNotice:false,
},
method:{
getisNotice(data){
this.isNotice=data //子组件传过来的值(false)
},
showNotice(){
this.isNotice=true
}
}
}