箭头函数与同级组件传值

同级组件传值

同级组件传值要使用到两个命令

首先是$on

其次是$emit

在生命周期create中创建一个uni.$on,

使用箭头函数（之后会讲）去创建一个updateNum 的函数 设定形参an

使其return结果为this.num+=num

created() {
			uni.$on('updateNum',an=>{this.num+=an}) //通过$on注册一个全局事件
		// 可以理解为,注册一个全局事件名叫updateNum
		// an是一个参数,将这个文件里的num和参数an+=运算
		// 箭头后边表示return
		},

这里的an最好不要取跟变量里相同的值

我事先在其他组件定义了一个num：3，

然后发现它会用那个3去代替num形参

这是那个定义了num：3 的组件的data

data(){
			return{
				num:3,
				intId:null,
				// 设定定时器id为空值
			};
		},

然后在另一个需要接受的组件中的methods里定义一个函数

		methods:{
			addNum(){
				uni.$emit('updateNum',10)
				// 使用emit函数调用全局事件,传参:10
			}
		}

使用emit接受函数的值

使用uni.emit 确定函数的名字是updateNum

这里调用的是刚刚用$on定义的全局事件，传递参数10

箭头函数

箭头函数

js6 的箭头函数是这样定义的

let a = ()=>555

定义一个变量a 声明其为一个函数 将555存入函数并返回值

箭头前是需要定义的函数名，箭头后是值，可以使用形参

如果返回的是一个对象

let _obj = _n =>({id:_n,name:'ad'})

这里就相当于是使用形参_n

如果箭头后边得是一个大括号或者数组的话

得用一个括号把它们整体括起来，要不然会因为js的语法报错

这里的_obj是个函数，可以把箭头函数当个return看

调用a，必须使用函数的调用方法，即

console.log(a())

做个对比

function a2(){
    return 555;
}
console.log(a2())

定义一个方法a2

返回值555，并将其打印

重点

箭头函数指向的域是他的父级作用域

举两个例子

let bb ={
    name:'adad',
    init:function(){
        console.log(this)
    }
}
bb.init

这里的bb.init会调用init，做console.log

我们会发现这里的this指向是指向的它所在的对象

就是bb

所以this会取到这里边的值，即name

let bb2 = {
    name:'adadad',
    init:()=>{
        console.log(this)
    }
}
bb2.init

我们会发现这里的this指向了windows

this指向的是它的父级

箭头函数没有function关键字

故而没有它自己的作用域

箭头函数不能作为箭头函数 也不能做new操作

let fn = ()=>'adadadad';
new fn()

这里执行会报错

Uncaught TypeError: fn i not a constructor

它没有constructor构造器，因为它的this指向的不是自己

let fn = ()=>{
    console.log(this.constructor)
}
fn()

这里的this.constructor，因为this指向了它的父级window

所以这里的构造器会选定为展示window的构造器

箭头函数也没有prototype属性

如果把这里的consrtuctor换成prototype，会显示undefined

js6本身没有用特别特别严格的语法格式

好像一个语法糖 写的很爽（