Vue之模态框确认组件---使用$emit触发父组件的methods

来源：互联网发布：华润网络福利待遇编辑：程序博客网时间：2024/05/18 18:21

父组件里面

<modalv-if="showModal" @cancel="cancel" @ok="ok">
<h3 slot="header">custom header</h3>
</modal>

cancel(){
console.log("我点击了取消按钮")

},
ok(){
console.log("我点击了ok按钮")
}

子组件里面

<templateid="modal-template">
<transitionname="modal">
<div class="modal-mask">
<div class="modal-wrapper">
<div class="weui_dialog_confirm" id="weui_dialog_confirm" style="display: block">
<div class="weui_mask"></div>
<div class="weui_dialog" id="weui_dialog">
<div class="weui_dialog_hd">
<strongclass="weui_dialog_title">提示</strong>
</div>
<div class="weui_dialog_bd" id="dialog_txt">确定已经服用了吗？</div>
<div class="weui_dialog_ft">
<a href="javascript:;" class="weui_btn_dialog primary" id="cans" @click="cancel">取消</a>
<a href="javascript:;" class="weui_btn_dialog primary" id="sure2" @click="ok">确定</a>
</div>
</div>
</div>
</div>
</div>
</transition>
</template>

Vue.component('modal', {
template: '#modal-template',
data: function () {
return {
counter: 0
}
},
methods:{
//确定按钮
ok () {
this.$emit('ok')
},
// 取消按钮
cancel () {
this.$emit('cancel');
}
}
})

阅读全文

0 0