uniapp自定义模板再学习-触发事件

文章介绍了基本的自定义组件的使用，发现也只是声明了属性，事件没有声明。

props

既然能用props声明属性，那么是否可以来声明调用的函数呢？

就找到了vue关于props相关的官方文章

但是尝试使用的时候不得其法。然后去找了第三方组件的写法

$emit

无参数时

<image :style="{width:width+'', height: height+''}" :src="src" @tap="click" @tap.stop="stopclick"></image>

先声明了原组件的点击触发的事件

然后需要声明出调起的方法

methods:{
	// tap触发当前的click事件
	click:function(){
		this.$emit('click')	// 使用组件的时候，触发组件上声明的@click事件
	},
	stopclick:function(){
		this.$emit('stopclick')	// 使用组件的时候，触发组件上声明的@stopclick事件
	}
}

写法如上

在页面使用的时候，引入，声明被触发的事件，事件名要和自定义组件中声明的名一致

<mImage width="100rpx" height="100rpx" src="/static/ic_patient_manage.png" @stopclick='ttt()'></mImage>

触发事件携带参数

如上，如果要携带参数，假设携带的参数为data，那么写法就是：

stopclick:function(){
	this.$emit('stopclick', data)	// 使用组件的时候，触发组件上声明的@click事件
},

在页面声明使用组件的时候

<mImage width="100rpx" height="100rpx" src="/static/ic_patient_manage.png" @stopclick='ttt'></mImage>

在methods中：
 ttt(res){
 	consloe.log(res) // 打印传递的参数
 }

注意点

1. 携带参数的时候，声明@方法不要带括号或者参数，否则会覆盖参数
2. methods中的函数可以带参数，可以直接打印所携带的参数

小结：

自定义组件中，在props中声明了属性，事件使用$emit方式声明
在使用自定义组件的时候，属性对应的就是其在props中的声明，可声明的函数就是其使用 $emit方式声明的

比如自定义组件中声明了 this.$emit('AAA')，意思就是在使用这个自定义组件的时候，它可以提供一个@AAA的函数，一般是点击事件

互相调用和传递参数

参考博文1
参考博文2

常用的：

组件向页面传递参数，调用页面的函数，通过组件声明$emit事件

页面向组件传递参数，通过组件声明变量接收数据
页面调用组件的函数，通过$ref选中组件直接.xxx的方式调用

全局使用

参考博文
如果自定义组件要多个地方使用，每次都引入会比较麻烦，所以需要全局引入，那么就要到main.js中进行：引入，注册，如下

import mImage from '@/components/m-image.vue'
Vue.component('mImage',mImage)