zoukankan      html  css  js  c++  java
  • vue单引js写组件的总结

    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(); })


      

  • 相关阅读:
    Maven依赖
    Maven坐标
    初识Maven POM
    Maven配置
    相似文本文档分析之SimHash算法
    Ubuntu14.10下JDK编译安装详细操作说明
    Ubuntu14.10下Tomcat编译安装 详细操作说明
    ubuntu 14.10 编译安装 Ruby
    ubuntu 14.10 编译安装 Python
    ubuntu 14.10 编译安装 Golang
  • 原文地址:https://www.cnblogs.com/yangsg/p/12766636.html
Copyright © 2011-2022 走看看