关于原生小程序中$emit的使用

关于原生小程序中$emit的使用

• 关于$emit的用法

它的功能为：$emit子组件调用父组件的方法并传递数据

实例：
子组件中，js代码中调用以下语句，这里双引号中的changeShow对应了下图父组件中@后面的changeShow，false和userInfo则为要传递的对象。

  this.$emit("changeShow",false,userInfo)

父组件中，前端：
这里，LoginWindow为父组件的名称，需要在components中申明。

<LoginWindow @changeShow="getModel(arguments)"></LoginWindow>

这边getModel为方法，对应下图中的methods中的getModel，arguements则对应下图的val数组，可以看出，传递的false和userInfo分别对应下图的val[0]，val[1]。

components: {
     
			LoginWindow
		},
data (){
     
			return{
     
				userinfo:{
     },
				showLogin:false
			}
		},
		methods: {
     
			getModel(val){
     
				this.showLogin = val[0]
				this.userinfo = val[1]
			}

		},

总结：$emit的使用我个人理解，需要子组件与父组件中的一些关系对应好。通俗来讲就是用一个以子组件名称命名的标签，其中@后面跟着方法名，对应emit中双引号包裹的名称。同时，以子组件名称命名的标签中还需包括一个方法，这个方法需要在父组件中的methods里定义，同时，方面名和对象都要对应好
下面用一张图最直观的理解他们的对应关系：