自定义组件事件$emit(子组件向父组件传递数据)

内嵌事件类型有 @click 、@change、@keyup等原生元素事件
自定义事件是在组件使用时声明，`@事件名称=‘事件触发的方法’
触发事件可传参也可不传参
触发事件一般是组件内部触发，父组件声明事件；多用于子组件向父组件传递数据

案例 Home组件写登录逻辑，声明`@login`事件

<template>
    <div>
        主页面列表信息，后面加载登录组件
        <hr>
        <br>
        <br>
        <br>
        <!--父组件中对子组件声明事件-->
        <my-login @login='toLogin'/>
    </div>
</template>

<script>
import MyLogin from './views/login/MyLogin.vue'
export default {
    methods: {
    	//login 事件触发后执行的方法
        toLogin(data){
            console.log(data);
            alert('子组件事件被触发，调用父组件方法');
        }
    },
    components:{
        MyLogin
    }
}
</script>

MyLogin 组件主要完成登录页面布局及触发事件-$emit

<template>
    <div>
        <ul>
            <li>
                <input type="text" v-model="userInfo.userName" placeholder="用户名">
            </li>
            <li>
                <input type="text" v-model="userInfo.password" placeholder="密 码">
            </li>
            <li>
                <input type="button" @click="login" value="登陆">
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    data() {
        return {
            userInfo:{
                userName:'',
                password:''
            }
        }
    },
    methods: {
        login(){
            //子组件通过触发自己的事件，把数据传递给父组件
            //this.$emit('事件名称','事件参数');
            this.$emit('login',this.userInfo);
        },
    },
}
</script>

$emit 触发事件传递的参数可进行校验-emits

事件参数可进行校验，和props属性值校验基本类似，校验失败时，也会触发事件，只是控制台会有异常信息打印。校验通过时，不会有异常信息打印。

点击“登录”按钮时，触发login事件时，对参数是否符合规则校验-emits

<template>
    <div>
        <ul>
            <li>
                <input type="text" v-model="userInfo.userName" placeholder="用户名">
            </li>
            <li>
                <input type="text" v-model="userInfo.password" placeholder="密 码">
            </li>
            <li>
                <input type="button" @click="login" value="登陆">
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    data() {
        return {
            userInfo:{
                userName:'',
                password:''
            }
        }
    },
    emits:{
        //login监听事件，事件名称和校验方法体
        login: ({userName,
                password}) => {
            if(userName!='' && password!=''){
                return true;
            }else{
                //校验不通过和props属性一样，在控制台打印错误日志。但是事件依然会触发，用处不大。
                console.log('登录名称和密码不能为空!');
                return false;
            }
        },
    },
    methods: {
        login(){
            //子组件通过触发自己的事件，把数据传递给父组件
            //this.$emit('事件名称','事件参数');
            this.$emit('login',this.userInfo);
        },
    },
}
</script>

mitt 第三方插件实现非父子组件间传递数据

父组件向子组件传递数据时，用props属性
子组件向父组件传递数据时，用$emit自定义事件
如何完成非父子组件间数据传递？当应用比较大时，组件间关系比较复杂时使用mitt第三方插件

mitt 插件主要实现原理，定义全局监听器，任何组件触发自定义事件时，以广播的形式通知所有监听。

项目中引入mitt插件

cnpm install --save mitt

定义Event工具JS，可快速引用mitt 。model/Event.js

// 类似工具类，其他地方引用这个JS 都可以使用mitt

import mitt from 'mitt'
const Event = mitt();
export default Event;

在组件挂载页面时，监听指定的事件 Event.on()

<script>
import Event from '../model/Event.js'
export default {
    mounted(){
        // 组件挂载时，监听事件，一旦事件触发则会监听到
        Event.on('myEvent',(data)=>{
            alert('触发了第三方插件mitt的事件了'+data);
        })
    },
}
</script>

在组件需要的位置直接触发事件 Event.emit()

<script>
import Event from '@/model/Event'
export default {
    data() {
        return {
            userInfo:{
                userName:'',
                password:''
            }
        }
    },
	methods: {
        login(){
            //任何组件都可以 Event.emit()触发事件，这个是全局的
            Event.emit('myEvent',this.userInfo);
        },
    },
}
</script>