vueパッケージ共通コンポーネント-confirm

ソースを先に入力:

<template> <transition name="mask-bg-fade">  <div class="mask" v-show="show"> <div class="mask_bg">div> <transition name="slide-fade"> <div class="modelBox" v-show="show"> <div class="title"> <p>{{confirmModalOptions.title}}p> <i class="icon" v-on:click="closeModel()">i>div> <div class="message"> <span v-for='(item,index) in confirmModalOptions.message' :key='index'>{{item}}span> div> <div class="model_btnBox" v-show='confirmModalOptions.btnCancelText != null'> <button v-on:click="confirmCancel()"> {{confirmModalOptions.btnCancelText}} button> <button v-on:click="confirmSubmit()"> {{confirmModalOptions.btnSubmitText}} button> div> div> transition> div> transition> template> <script> export default { name:'confirm', props: ["confirmModalOptions"], data() { return { show: false, //         } }, methods: { closeModel() { this.show = false; }, showModel() { this.show = true; }, confirmCancel() { this.show = false; if(typeof (this.confirmModalOptions.btnCancelFunction)==='function'){ this.confirmModalOptions.btnCancelFunction() } }, confirmSubmit() { this.show = false; if(typeof (this.confirmModalOptions.btnSubmitFunction)==='function'){ this.confirmModalOptions.btnSubmitFunction() } } } } script> <style scoped lang='scss'> .mask{ .modelBox{ width: 6rem; height: 4rem;margin: auto;background-color: white;position: relative;top: calc(22%);border-radius: .1rem; } .title{padding: .1rem;text-align: center;background-color: #F7F8FA;border-top-left-radius: .1rem;border-top-right-radius: .1rem;display: flex;justify-content: center; p{flex: 1;color: #666;} } .message{ padding: .2rem;height: 2.6rem; span{display: inline-block;padding: .1rem;background-color: #24D08E;width: 1.2rem;margin: .1rem;color: white;text-align: center;border-radius: .1rem; } } .model_btnBox{ text-align: center; button{ padding: .1rem .6rem;border: none;color: white;border-radius: .1rem; margin: 0 .5rem; &:nth-child(2){ background-color: #24D08E; } } } } style>

1.コンポーネント間の通信はpropsによって行われ、オブジェクトは配列であるも関数であってもよい.必要なコンポーネントのページでimport DConfirm from'../components/confirm.vue’;コンポーネントを導入し、コンポーネントを登録します.そして、v-bind命令によりデータ3をバインドする.導入されたページでは、次の方法を使用します.

function abc(){
    this.$refs.myConfirm.showModel();
    this.confirmOptions= {
        type: "warning",
        title: "    ",//  
        message:this.locklist,
         btnCancelText:'  ',
         btnSubmitText:'  ',
          btnCancelFunction:function(){
              console.log(333)
          },
          btnSubmitFunction:function(){
              console.log(1111)
          }
    }
}