Question

我在分配的项目中也有多个mixin。某些对象在属性中设置，例如：

static get properties() {
  return {
    config: {
      type: Object
    }
  }
}

其他mixin的对象在构造函数中的设置方式如下：

constructor() {
  super();

  this.language = {
    name: "english",
    label: "EN"
  }
}

我猜这两个都是全局可访问的，因为mixins随处可见。但是两种实现之间有什么区别？

编辑（附加代码）

这些mixins是通过以下方式创建的：

MyMixin = function (superClass) {
  return class extends superClass {

    static get properties() {
      return {
        config: {
          type: Object
        }
      }
    }

    constructor() {
      super();
    }

或其他方法：

MyMixin = function (superClass) {
  return class extends superClass {

    static get properties() {
      return {
      }
    }

    constructor() {
      super();
      this.language = {
        name: "english",
        label: "EN"
      }
    }

，它们被其他组件以下列方式使用：

class HomePage extends MyMixin(Polymer.Element) {
  ...
}

Answer 1

通过“属性对象”创建的那些映射为HTML属性，这意味着您可以拥有例如数据绑定：

<my-component config="[[someContent]]"></my-component>

在构造函数或connectedCallback中创建的变量未映射为HTML属性，因此您不能从外部绑定这些变量。

document.querySelector('my-component').language

会返回

{
  name: "english",
  label: "EN"
}

但是

document.querySelector('my-component').getAttribute('language')

将返回undefined和

<my-component language="[[someContent]]"></my-component>

不会工作

在构造函数中初始化的对象与属性之间有什么区别

1 个答案: