您的位置:首页 > 产品设计 > UI/UE

vue中注册全局函数的方法

2017-11-13 14:57 537 查看
import util from './common/js/util'

Vue.prototype.$util = util;

util.js中

var md5 = require('./md5.min')

var SIGN_REGEXP = /([yMdhsm])(\1*)/g;
var DEFAULT_PATTERN = 'yyyy-MM-dd';
function padding(s, len) {
    var len = len - (s + '').length;
    for (var i = 0; i < len; i++) {
        s = '0' + s;
    }
    return s;
};   //这里写入组件中要使用的函数

export default {//导出这个函数

getQueryStringByName: function (name) {

}

};

在自主件中引入

<script>
    import util from '../../common/js/util'

就可以直接也能用this.$util.getQueryStringByName()来调用这个方法了

1:eventhub.js文件里的内容

:import Vue from 'vue'

export default new Vue()

eventhub.js里面写入这个

import Vue from 'vue'
export default new Vue()

然后在main.js里引入这个vue的实例

import eventhub from './eventhub'

Vue.prototype.$eventhub = eventhub

然后就可以

eventhub.$emit()//指的是触发

eventhub.$on()//指的是注册一个方法

例如在main.js里写有

 eventhub.$emit('qrcode','wx_qrcode','关注我');

而在qrcode.vue文件里写有

this.$eventhub.$on('qrcode',(text,title)=>{

方法:它就注册里这个方法

}

 eventhub.$emit('qrcode','wx_qrcode','关注我);这里就能执行它!!!

    var self=event.currentTarget;获取当前点击事件的元素

意思就是当你给一个vue组件绑定事件时候,要加上native

在data(){

return{

goods:[

{

id:""

name:""

pic_id:""

}

]

}

}

这样定义数据  

而在jison中获取

goods:[

{id:"",name:"",pic_id:""},

{id:"",name:"",pic_id:""},

{id:"",name:"",pic_id:""}

]

他会把数据全部集合起来

过滤器:

{{total| price}}元

在vue的方法中写入:

filters:{

price:function(val){//val就是total的值,最后返回的是过滤好的值

 var res = 0.00;

        if (Math.ceil(val) == val) {

          val = val + ".00"

        } var res = 0.00;

        if (Math.ceil(val) == val) {

          val = val + ".00"

        }

        try {

          res = val.toFixed(2)

          if (res == '-0.00') {

            res = '0.00'

          }

        } catch (err) {

          res = val

        }

        return res;

      }

        try {

          res = val.toFixed(2)

          if (res == '-0.00') {

            res = '0.00'

          }

        } catch (err) {

          res = val

        }

        return res;

      }

}

}

 <checkbox :val="v.check" @on-change="addAllGoods(v)"></checkbox>

这里一般我觉得是利用checkbox,如果发生改变时,向data中增加选择的参数

v.check这里一般是默认的状态,在后台定义,一般是false

关于父子组件传参:

自组件定义方法

如:

   <div class="checkbox">

      <input type="checkbox" v-model="flag" @change="change">

      <img src="../../assets/checked.png" v-show="flag">

    </div>

exropt default{ 

props:{            //定义共享数据

val:{

 type:Boolean

},

index:{

type:String

}

},

data(){

return{

flag:this.val

}

},

  computed: {

    _index(){

      return this.index

    }

  },

  watch: {

    val(old, newVal) {

      return this.flag = !newVal;

    }

  },                //监听

methods:{

   change() {

      this.$emit('on-change');

    }                      //这是重点这有这个才能触发这个组件

}

}

最后在父组件中引用:

   <checkbox :val="v.check" @on-change="addAllGoods(v)"></checkbox>

  import checkbox from './shopping/checkBok'

    components: {

checkbox

}

this.total -= Number(price);

 methods: {

    getTotal(price, type) {//true为增加, false为减少  可以使数据新增或减少

      if (type) {

        this.total += Number(price);

      } else {

        this.total -= Number(price);

      }

}

var data=this.$route.query;

data.address=this.address.id

data.remark=[]

可以直接这样从进来的参数对象中写入这些数据,最后提交给后代
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: