element-ui 源码学习

https://athena0304.github.io/element-analysis/

1、模板字符串实现字符串拼接

typeClass() {
        return `el-alert--${ this.type }`;
      },

2、inject

inject，与父组件中的provide相对应，provide 选项允许我们指定我们想要提供给后代组件的数据/方法。相比 $parent 来说，这个用法可以让我们在任意后代组件中访问provide里的内容。

// dropown.vue
provide() {
      return {
        dropdown: this
      };
    },

// dropdown.vue
inject: ['dropdown'],
watch: {
      'dropdown.placement': {
        immediate: true,
        handler(val) {
          this.currentPlacement = val;
        }
      }
    }

3、$on

监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。

vm.$on('test', function (msg) {
  console.log(msg)
})
vm.$emit('test', 'hi')
// => "hi"