vue单引js写组件的总结

Posted 2021-02-22 yangsg

 

html部分正常写 调用组件时

//写在body里面

<withdrawal-hongbao v-if="flagHongbao" :hongbao="hongbao"></withdrawal-hongbao>

//template 要写在body外面

<template id="withdrawal-notice" style="display: none;">
    <div id="hongbao-main">
        <div class="hongbao-con">
            <div id="hongbao-click" @click="goUrl()" data-url="{{hongbao.dataurl}}"></div>
            <div id="hongbao-close" @click="goClose()"></div>
        </div>
    </div>
</template>

JS部分

class Withdrawal {
  constructor() {
    this.init();
  }
  init() {
        let components = this.vueComponents();

        this.$vm = new Vue({
            el: ".wrapper",
            data: {
                   hongbao:{
                      url:"",    
                      sumAmt:"",    
                },
                flagHongbao:false,
               },
            methods: {
                hongBao: function() {//你的逻辑}     
            },
            components: components,
            })
  vueComponents() {
    let self = this;

    return {
      withdrawalHongbao:self.getwithdrawalhongbao()
    };
  }
 getwithdrawalhongbao(){
        return Vue.extend({
          template: "#withdrawal_hongbao",
          props: ["hongbao","flagHongbao"],
          methods:{
            goClose(){
                this.flagHongbao = false;
                document.getElementById("hongbao-main").style.display = "none";
            },
            goUrl(){}
          }
        });
      }
}    
$(function() {
    new Withdrawal();
})