vue 组建交互

home.vue

<alert-Plane @colseplan="colseplan" @confirm='receivepet' v-show='this.getpeterror' :btnType='1' :titlename='"提示"' :OneBtnTxt='"重新领取"'>

            <div slot="content" class="alertcontent">
               {{message}}
            </div>

 </alert-Plane>

<script>

import alertPlane from '../../components/alertplane';

export default {

    components:{
        alertPlane
    },

}

</script>

组件

alertplane.vue 

<template>

    <div class="alert" >
        <div class="control borderradius">
            <div class="title">
                {{titlename}}<span class="close" @click="closeAlert()"></span>
            </div>
            <slot name="content" class="content"/>
            <div class="btns">
                <div v-show="btnType=='1'" class="type1">
                    <a class="yellow_btn_white" @click='btnClick("yes")'>{{OneBtnTxt}}</a>
                </div>
                <div v-show="btnType=='2'" class="type2">
                    <a class="bt1" @click='btnClick("no")'>{{twobtntitle[0].title}}</a>
                    <a class="bt2" @click='btnClick("yes")'>{{twobtntitle[1].title}}</a>
                </div>
            </div>
        </div>
        <div id='mask' @click="closeAlert()"></div>
    </div>
</template>
<script>
    export default {
        data(){
            return{
              
            }
        },
        mounted(){
          
        },
        props:{  
            content:{
              type: String,
              default:""
            },
            btnType:{
              type:Number,
              default:1
            },
            OneBtnTxt:{
                type:String,
                default:""
            },
            titlename:{
                type:String,
                default:""
            },
            twobtntitle:{
              type:Array,
              default:function(){
                return ["取消","确定"]
              }
            }
        },
        computed: {
        },
        methods: {
          gotoAddress(path){
              this.$router.push(path)
          },
          closeAlert:function(){
            this.$emit('colseplan','true');
          },
          btnClick:function(str){
            if(str=='yes'){
              this.$emit('confirm','true');
            }else if(str=='no'){
              this.$emit('confirm','false');
            }
            
          },
          twobtn:function(){
            var arr = ["取消","确定"];
            return arr
          }
        },
    }
</script>