Vue.js 是否可以将数据从聚合物组分传递到Vue组分？

下面的代码是我想做的，但它目前不起作用。我正在尝试在我的Polymer应用程序中构建Vue组件，作为一种缓慢迁移Polymer的方法

我已经能够在我的Polymer应用程序中使用Vue组件，但我一直在研究如何将数据从Polymer组件传递到Vue组件。理想情况下，我想做的是将聚合物属性传递到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>

类PartInputView扩展了Polymer.Element{
静态get是（）{return'部分输入视图'；}
构造函数（）{
超级（）；
}
静态获取属性（）{
返回{
testValue:“这正在工作！”
};
}
就绪（）{
super.ready（）；
Vue.组件（“Vue-comp”{
道具：[“测试”]，
模板：“{test}}”
})
const el=this.shadowRoot.querySelector（“#vuepp”）
让vueApp=新的Vue({
埃尔
});
}
}

是的，这是可能的。如果不是您的[不正确的]属性声明，您的代码本可以工作。您应该在控制台中看到此错误：

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
  }
}

如果你修复了这个bug，你会发现你的代码可以正常工作

类PartInputView扩展了Polymer.Element{
静态get是（）{return'部分输入视图'；}
静态获取属性（）{
返回{
测试值：{
类型：字符串，
值：“这是有效的！”
}
};
}
就绪（）{
super.ready（）；
Vue.组件（“Vue-comp”{
道具：[“测试”]，
模板：“{test}}”
})
const el=this.shadowRoot.querySelector（“#vuepp”）
让vueApp=新的Vue({
埃尔
});
}
}
customElements.define（PartInputView.is，PartInputView）

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