vue代码段

发表于 | 更新于 | 分类于   |   字数统计: 496(字)   |   阅读时长: 2(分)
  • Vue hook
  • Vue 依赖注入
  • Vue EventBus

Vue hook

版本：vue@^2.6.10
介绍：程序化的事件侦听器 在 vue 文档中，只是在事件监听的中对于 hook 的使用简单的提了一句，不过其还是十分有用的。

使用：

1
2
// 监控声明周期钩子使得更易阻止代码
this.$once("hook:beforeDestroy", function () {});

Vue 依赖注入

版本：vue@^2.6.10
介绍：依赖注入 依赖注入可以指定数据/方法将其提供给所有的后代组件

  • 优点：后代元素都可以使用父级注入的属性和方法
  • 缺点：
    1. 父级组件将会和后代组件强耦合
    2. 后代组件不知道使用的属性或方法来自哪个父级组件

使用：

1
2
3
4
5
6
// 父级组件定义 provide
provide: function () {
    return {
        getMap: this.getMap
    }
}



1
2
// 后代组件定义 inject
inject: ['getMap']

补充:

  • provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的 property 还是可响应的。

  • 可以将 inject 的值，用于 props 和 data

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    const Child = {
        inject: ["foo"],
        props: {
            bar: {
                default() {
                    return this.foo;
                },
            },
        },
    };

  • 可以对 inject 的值使其变成可选项

    1
    2
    3
    4
    5
    const Child = {
        inject: {
            foo: { default: "foo" },
        },
    };

  • 如果它需要从一个不同名字的 property 注入，则使用 from 来表示其源 property

    1
    2
    3
    4
    5
    6
    7
    8
    const Child = {
        inject: {
            foo: {
                from: "bar",
                default: "foo",
            },
        },
    };

Vue EventBus

vue 中事件的传递

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
export function broadcast(component: any, componentName: string, eventName: string, params) {
    // debugger;
    component.$children.forEach((child) => {
        var name = child.$options.componentName;
        if (componentName) {
            if (name === componentName && child[eventName]) {
                child[eventName].apply(child, params);
            } else {
                broadcast.apply(child, [child, componentName, eventName, params]);
            }
        } else {
            if (child[eventName]) {
                child[eventName].apply(child, params);
            }
            broadcast.apply(child, [child, componentName, eventName, params]);
        }
    });
}
export function dispatch(component, componentName, eventName, params = []) {
    var parent = component.$parent || component.$root;
    var name = parent.$options.componentName;
    while (parent && (!name || name !== componentName)) {
        parent = parent.$parent;

        if (parent) {
            name = parent.$options.componentName;
        }
    }
    if (parent) {
        parent.$emit.apply(parent, [eventName].concat(params));
    }
}