是否可以将数据从 Polymer 组件传递到 Vue 组件？答案

【问题标题】：Is it possible to pass data from Polymer component to Vue component?是否可以将数据从 Polymer 组件传递到 Vue 组件？
【发布时间】：2019-09-05 19:07:23
【问题描述】：

下面的代码是我想做的，但它目前不起作用。我正在尝试开始在我的 Polymer 应用程序中构建 Vue 组件，以此来慢慢迁移出 Polymer。

我已经能够让一个 Vue 组件在我的 Polymer 应用程序中工作，但我一直不知道如何将数据从 Polymer 组件传递到 Vue 组件。理想情况下，我想做的是将 Polymer 属性传递给 Vue 组件，就像我在下面使用 testValue 所做的那样（尽管下面的代码不起作用）

任何指点都非常感谢，谢谢！

<dom-module id="part-input-view">
  <template>
    <style include="part-input-view-styles"></style>
    <div id="vueApp">
      <vue-comp id="test" test$="[[testValue]]"></vue-comp>
    </div>
  </template>

  <script>
    class PartInputView extends Polymer.Element {
      static get is() { return 'part-input-view'; }

      constructor() {
        super();
      }

      static get properties() {
        return {
          testValue: 'This is working!'
        };
      }

      ready() {
        super.ready();
        Vue.component('vue-comp', {
          props: ['test'],
          template: '<div class="vue-comp">{{test}}</div>'
        })
        const el = this.shadowRoot.querySelector('#vueApp')
        let vueApp = new Vue({
          el
        });
      }
    }
  </script>
</dom-module>

【问题讨论】：

据我搜索，如果您的 vue 组件在聚合物之外，则很容易共享数据。但是当它在这里时，一个论坛中的评论：不，你不能。经验之谈。原因如下：
Vue 已针对基于数据创建/更新您的 DOM 元素进行了优化。 Polymer 确实创建了一个 DOM 节点并在内部实现了 lot os JS 来创建自己的影子 DOM。每个 Polyer 组件可以有不同的生命周期（例如，在创建自定义 Table Polymer 组件一段时间后，示例和表格组件实际上可以创建 TR、TD 元素）。而 Vue 不知道这一点。
一旦创建了父标签的 Dom，Vue 就假定它的工作已经完成。如果数据更改意味着它将删除或更新它。但是之前创建的 Polyermer 组件的生命周期可能仍在进行中..您会在控制台中遇到很多异常。

标签： vue.js polymer vue-component polymer-2.x

【解决方案1】：

是的，这是可能的。如果不是因为您的 [不正确] 属性声明，您的代码就会起作用。您应该会在控制台中看到此错误：

element-mixin.html:122 Uncaught TypeError: Cannot use 'in' operator to search for 'value' in This is working!
    at propertyDefaults (element-mixin.html:122)
    at HTMLElement._initializeProperties (element-mixin.html:565)
    at new PropertiesChanged (properties-changed.html:175)
    at new PropertyAccessors (property-accessors.html:120)
    at new TemplateStamp (template-stamp.html:126)
    at new PropertyEffects (property-effects.html:1199)
    at new PropertiesMixin (properties-mixin.html:120)
    at new PolymerElement (element-mixin.html:517)
    at new PartInputView (part-input-view.html:17)
    at HTMLElement._stampTemplate (template-stamp.html:473)

在 Polymer 中，具有默认值的字符串属性只能这样声明：

static get properties() {
  return {
    NAME: {
      type: String,
      value: 'My default value'
    }
  }
}

这没有简写。您可能对未初始化属性的简写感到困惑，即：

static get properties() {
  return {
    NAME: String
  }
}

如果您修复了该错误，您会发现您的代码可以正常工作...

class PartInputView extends Polymer.Element {
  static get is() { return 'part-input-view'; }

  static get properties() {
    return {
      testValue: {
        type: String,
        value: 'This is working!'
      }
    };
  }

  ready() {
    super.ready();
    Vue.component('vue-comp', {
      props: ['test'],
      template: '<div class="vue-comp">{{test}}</div>'
    })
    const el = this.shadowRoot.querySelector('#vueApp')
    let vueApp = new Vue({
      el
    });
  }
}

customElements.define(PartInputView.is, PartInputView)

<head>
  <script src="https://unpkg.com/vue@2.6.10"></script>
  <base href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/">
  <script src="webcomponentsjs/webcomponents-loader.js"></script>
  <link rel="import" href="polymer/polymer.html">
</head>
<body>
  <part-input-view></part-input-view>

  <dom-module id="part-input-view">
    <template>
      <style include="part-input-view-styles"></style>
      <div id="vueApp">
        <vue-comp id="test" test$="[[testValue]]"></vue-comp>
      </div>
    </template>
  </dom-module>
</body>

【讨论】：