uniapp-学习1

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

一、uniapp 绑定函数

与vue中一样 在需要绑定事件的标签上写 @click=函数名

1.1函数的形参e可接收事件源

代码如下（示例）：

<template>
	<view>
		<button type="default" @click="handleClick">点击事件</button>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			handleClick(e){
				console.log(e)
			},
		},

打印出来的e是有数据的 如下图

1.2.调用函数时传递的参数是实参 给实参赋值 实参会将值传给形参

代码如下（示例）：

<view>
		<button type="default" @click="handleClick（10）">点击事件</button>
</view>
methods: {
			handleClick(e){
				console.log(e)
			},
		},

这时e不在=事件源的值，而是实际的参数，实参值，e=10

另外，还可以传递多个实参，用多个形参去接收

<view>
		<button type="default" @click="handleClick（10,20）">点击事件</button>
</view>
methods: {
			handleClick(e,f){
				console.log(e)
				console.log(f)
			},
		},

10会传给e,20会传给f

---

1.3 既要获取事件源e,又要传递实际的参数

获取事件源e,将$event 传给函数，用一个形参去接收 ( $event 就是事件源）

<view>
		<button type="default" @click="handleClick（10,20,$event）">点击事件</button>
</view>
methods: {
			handleClick(e,f,event){
				console.log(e)
				console.log(f)
				console.log（event）
			},
		},

总结

不传参数是 形式参数e是事件源，传递参数后e是实际的参数
传递参数时 $event 是事件源

二创建组件并在页面中使用组件

创建组件 新建目录components -新建组件my-comp
使用组件 在哪个页面用就在哪引入组件，引入以后需要在components声明，（在页面级，页面的组件都声明后），当做标签使用

import  myComp from '../.../components/my-comp/my-comp'

components: {
  		myComp
  	},

<my-comp></my-comp>

2.1父子组件传值

2.1.1父组件向子组件传值

在子组件（小组件）的props对象里定义要传的值的类型,与data平级

props:{
  		title:String
  	}

数据层中用插值表达式 {{ }} 展示

<view class="title">
  	{{title}}
  </view>

---

在父组件中 当做属性将值传给子组件

<my-comp title='我是传递的标题'></my-comp>

进阶 // title 不传值的时候在字组件有默认值

字组件中的props 定义的字段写成对象，

  	props:{
  		title:{
  			type:String,
  			default:'默认的标题'
  		}
  	},

---

在父组件中不传值

<my-comp ></my-comp>

2.1.2子组件向父组件传值

在子组件中有input输入框，在子组件中输入值，但在父组件使用，需要将输入的值传给父组件
通过this. $ emit(“事件名字”,事件源数据) 将数据保存下来
在父组件中 @事件名="处理函数接收传来的值

<view>
  	我是子组件，小组件
  	<view class="title">
  		{{title}}
  	</view>
  	<input type="text" v-model='value'>
  	<button type="default" @click="submit">将输入的值传给父组件</button>
  	
  </view>

在引用子组件的时候，给子组件标签绑定一个事件 @事件名=“处理函数($event)” 事件名与子组件的事件名保持一致

<my-comp  title='我是传递的标题' @submit=submitValue></my-comp>
submitValue(e){
  			console.log(e)
  		}

2.1.3 兄弟组件之间的传值

方法1：把数据放在公共的父组件中，然后在一层一层的传递，即两个子组件先向父组件传值，传到父组件上，父组件再将子组件a的数据传给子组件b,父组件再将子组件b的数据传给子组件a，实现兄弟组件之间的传值
方法2：使用vueX
方法3：通过事件总线

事件总线

触发者触发事件，处理者做出响应
// 触发事件，通知事件处理者更新 uni.$emit(事件名，需要处理的值) 触发numAchange 事件，更新
this.numA的值

	uni.$emit('numAchange',this.numA)

// 在需要处理的组件b 监听这个事件
一加载出来就需要监听，实例创建完成生命周期里监听 在created
uni.$on 监听事件

   	uni.$on('numAchange',(numA)=>{
				console.log(numA)
				}

不需要监听时必须取消监听，以免浪费资源
在实例销毁以前生命周期清除监听，在beforeDestroy用uni.$off(),参数是需要清除监听的事件
可以接收两个参数
第一个参数，清除事件名字（如果不传代表清除所有监听）

beforeDestroy() {
  		uni.$off('numAChange')
  	},

第二个参数，代表清除某个监听函数（如果不传代表清除该事件）uni.$off(‘numAChange’,this. numAChangefun)

created（）{
uni.$on('numAchange',函数名
  			}
}，
method：{
numAChangefun(numA){
 			console.log(numA)
},
beforeDestroy(){
uni.$off('numAChange',this.  numAChangefun)

uni.$once() 只监听一次

在vue中使用时间总线

新建 .js 文件, 在这个文件中挂载vue,new 一个vue实例，在哪使用把uni.换成定义的事件总线