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=[]
可以直接这样从进来的参数对象中写入这些数据,最后提交给后代
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=[]
可以直接这样从进来的参数对象中写入这些数据,最后提交给后代
相关文章推荐
- axios模块在vue开发中如何使用引入,如何注册全局方法
- 使用use注册Vue全局组件和全局指令的方法
- 全局变量 全局函数vue 方法
- vue全局函数,公共方法的抽离
- vue 组件 全局注册与局部注册的方法
- Vue全局方法注册
- vue 组件 全局注册和局部注册
- Vue-component全局注册
- 【转】C++里定义全局变量和函数常用方法
- PHP中函数内引用全局变量的方法
- vue脚手架中自定义全局组件的方法
- jQuery简单注册和禁用全局事件的方法
- vue--自定义全局方法,在组件里面使用
- vue全局组件与局部组件的方法
- 给元素注册事件时,事件函数中不能使用全局变量
- 浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
- vue组件挂载到全局方法的示例代码
- php部分(查看文件、建立站点、语法变量、变量的几个方法、“全局局部变量的调用”、static、函数参数的作用域);
- MFC中定义全局变量和全局函数的方法
- Linux内核中断/异常的注册(重要中断函数的查找方法,Linux 2.6.11)