- 在vue中父组件向自子组件传递props,子组件向父组件传递属性是用$emit(发布订阅)
- 下面是一个模态框示例,可以利用到这两个属性。基本逻辑是点击页面上一个按钮,
弹出弹框,点击弹框上关闭按钮,隐藏弹框
- (这不是很简单嘛。。。我jq两行就可以实现)确实是但是jq实现的并不是组件,不能每次都把html和js都复制一遍吧,这样工作效率未免太低了,(人家盖房子都用水泥浇筑了,你非要搬砖,你累不累啊)
css
<style>
.mask {
width: 100%;
height: 100%;
position: fixed;
background: rgba(0, 0, 0, .35);
top: 0;
left: 0
}
.dialog {
width: 400px;
height: 150px;
background: #fff;
position: fixed;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0)
}
</style>
- 先想一下思路:页面上一个button 点击弹出弹框,因为vue是数据驱动的视图,所以需要需要定义一个flag变量,如果flag = ture 那么弹出
- 弹框出现后,目前是在子组件内,所以需要$emit() 一个关闭事件把flag变为false从而关闭弹框
<body>
<div id="app">
<button @click="flag=true">弹</button>
<modal :show="flag" @close="()=>flag=false"></modal>
</div>
<template id="dialog">
<div class="mask" v-show="show">
<div class="dialog">
<button @click="dialogClose">关闭</button>
</div>
</div>
</template>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
let modal = {
props:['show'],
template:'#dialog',
methods:{
dialogClose(){
this.$emit('close')
}
}
}
let vm = new Vue({
el:'#app',
data:{
flag:false
},
components:{
modal
}
})
</script>
</body>