好家伙,

0、一个例子

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>Vue 父子组件通信示例</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <parent-component></parent-component>
    </div>

    <script>
        // 子组件
        Vue.component('child-component', { template: ` <div>
          <button @click="sendDataToParent">发送数据给父组件</button>
        </div>
 `, methods: { sendDataToParent() { this.$emit('data-sent', '这是从子组件发送的数据'); } } }); // 父组件
        Vue.component('parent-component', { template: ` <div>
          <child-component @data-sent="handleDataReceived"></child-component>
          <p>从子组件接收到的数据：{{ receivedData }}</p>
        </div>
 `, data() { return { receivedData: '' }; }, methods: { handleDataReceived(data) { this.receivedData = data; } } }); // 创建Vue实例
        let vm = new Vue({ el: '#app' }); </script>
</body>

</html>

1、$emit、$on源码

源码实现，我们来看$emit、$on的源码实现部分

Vue.prototype.$on = function (event, fn) { var vm = this; if (isArray(event)) { for (var i = 0, l = event.length; i < l; i++) { vm.$on(event[i], fn); } } else { (vm._events[event] || (vm._events[event] = [])).push(fn); // optimize hook:event cost by using a boolean flag marked at registration
        // instead of a hash lookup
        if (hookRE.test(event)) { vm._hasHookEvent = true; } } return vm; }; Vue.prototype.$emit = function (event) { var vm = this; // 处理大小写
 { var lowerCaseEvent = event.toLowerCase(); if (lowerCaseEvent !== event && vm._events[lowerCaseEvent]) { tip("Event \"".concat(lowerCaseEvent, "\" is emitted in component ") +
                "".concat(formatComponentName(vm), " but the handler is registered for \"").concat(event, "\". ") +
                "Note that HTML attributes are case-insensitive and you cannot use " +
                "v-on to listen to camelCase events when using in-DOM templates. " +
                "You should probably use \"".concat(hyphenate(event), "\" instead of \"").concat(event, "\".")); } } var cbs = vm._events[event]; if (cbs) { cbs = cbs.length > 1 ? toArray(cbs) : cbs; var args = toArray(arguments, 1); var info = "event handler for \"".concat(event, "\""); for (var i = 0, l = cbs.length; i < l; i++) { invokeWithErrorHandling(cbs[i], vm, args, vm, info); } } return vm; }; function invokeWithErrorHandling(handler, context, args, vm, info) { var res; try { res = args ? handler.apply(context, args) : handler.call(context); if (res && !res._isVue && isPromise(res) && !res._handled) { res.catch(function (e) { return handleError(e, vm, info + " (Promise/async)"); }); res._handled = true; } } catch (e) { handleError(e, vm, info); } return res; }

2.代码解释

看着比较复杂，所以我们精简一下，去掉性能优化和一些正则表达式还有一些数组处理

精简下来无非几句代码

$on

(vm._events[event] || (vm._events[event] = [])).push(fn);

$emit

var cbs = vm._events[event]; invokeWithErrorHandling(cbs[i], vm, args, vm, info); function invokeWithErrorHandling(handler, context, args, vm, info) { res = args ? handler.apply(context, args) : handler.call(context); return res; }

分析:

$emit、$on的实现使用了观察者模式的设计思想

$on方法用于在当前Vue实例上注册事件监听器。

vm._events：维护一个事件与其处理函数的映射。每个事件对应一个数组，数组中存放了所有注册的处理函数。

$emit方法用于触发事件，当事件被触发时，调用所有注册在该事件上的处理函数。

非常简单

3.源码注释版本

// 在Vue的原型上定义一个方法$on
Vue.prototype.$on = function (event, fn) { // vm指的是Vue的实例
    var vm = this; // 如果event是一个数组，那么对每个事件递归调用$on方法
    if (isArray(event)) { for (var i = 0, l = event.length; i < l; i++) { vm.$on(event[i], fn); } } // 如果event不是一个数组，那么将函数fn添加到vm._events[event]中
    else { (vm._events[event] || (vm._events[event] = [])).push(fn); // 如果event是一个钩子事件，那么设置vm._hasHookEvent为true
        if (hookRE.test(event)) { vm._hasHookEvent = true; } } // 返回Vue的实例
    return vm; }; // 在Vue的原型上定义一个方法$emit
Vue.prototype.$emit = function (event) { // vm指的是Vue的实例
    var vm = this; // 处理事件名的大小写
 { var lowerCaseEvent = event.toLowerCase(); // 如果事件名的小写形式和原事件名不同，并且vm._events中有注册过小写的事件名
        if (lowerCaseEvent !== event && vm._events[lowerCaseEvent]) { // 那么提示用户事件名的大小写问题
            tip("Event \"".concat(lowerCaseEvent, "\" is emitted in component ") +
                "".concat(formatComponentName(vm), " but the handler is registered for \"").concat(event, "\". ") +
                "Note that HTML attributes are case-insensitive and you cannot use " +
                "v-on to listen to camelCase events when using in-DOM templates. " +
                "You should probably use \"".concat(hyphenate(event), "\" instead of \"").concat(event, "\".")); } } // 获取vm._events[event]中的所有回调函数
    var cbs = vm._events[event]; // 如果存在回调函数
    if (cbs) { // 如果回调函数的数量大于1，那么将其转换为数组
        cbs = cbs.length > 1 ? toArray(cbs) : cbs; // 获取除event外的其他参数
        var args = toArray(arguments, 1); // 定义错误处理信息
        var info = "event handler for \"".concat(event, "\""); // 对每个回调函数进行错误处理
        for (var i = 0, l = cbs.length; i < l; i++) { invokeWithErrorHandling(cbs[i], vm, args, vm, info); } } // 返回Vue的实例
    return vm; }; // 定义一个错误处理函数
function invokeWithErrorHandling(handler, context, args, vm, info) { var res; try { // 如果存在参数args，那么使用apply方法调用handler，否则使用call方法调用handler
        res = args ? handler.apply(context, args) : handler.call(context); // 如果返回结果res存在，且res不是Vue实例，且res是一个Promise，且res没有被处理过
        if (res && !res._isVue && isPromise(res) && !res._handled) { // 那么对res进行错误处理，并标记res已经被处理过
            res.catch(function (e) { return handleError(e, vm, info + " (Promise/async)"); }); res._handled = true; } } // 如果在执行过程中抛出错误，那么进行错误处理
    catch (e) { handleError(e, vm, info); } // 返回结果res
    return res; }

玄机博客

1.本站内容仅供参考，不作为任何法律依据。用户在使用本站内容时，应自行判断其真实性、准确性和完整性，并承担相应风险。

2.本站部分内容来源于互联网，仅用于交流学习研究知识，若侵犯了您的合法权益，请及时邮件或站内私信与本站联系，我们将尽快予以处理。

3.本文采用知识共享署名4.0国际许可协议 [BY-NC-SA] 进行授权

4.根据《计算机软件保护条例》第十七条规定“为了学习和研究软件内含的设计思想和原理，通过安装、显示、传输或者存储软件等方式使用软件的，可以不经软件著作权人许可，不向其支付报酬。”您需知晓本站所有内容资源均来源于网络，仅供用户交流学习与研究使用，版权归属原版权方所有，版权争议与本站无关，用户本人下载后不能用作商业或非法用途，需在24个小时之内从您的电脑中彻底删除上述内容，否则后果均由用户承担责任；如果您访问和下载此文件，表示您同意只将此文件用于参考、学习而非其他用途，否则一切后果请您自行承担，如果您喜欢该程序，请支持正版软件，购买注册，得到更好的正版服务。