Is it possible to pass data from Polymer component to Vue component?

Question

The below code is what I'd like to do but it currently doesn't work. I'm trying to start building Vue components inside my Polymer app as a way to slowly migrate off Polymer.

I've been able to get a Vue component working inside my Polymer app, but I'm stuck on how to pass data from the Polymer component to the Vue component. Ideally, what I'd like to do is pass a Polymer property into the Vue component like I'm doing with testValue below (although the code below doesn't work)

Any pointers are greatly appreciated, thank you!

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

As far as I search, it is easy to share data if your vue component is outside polymer. but when it is inside here the comment in one forum: No you can not. Telling from experience. Here is the reason.: — Cappittall, Apr 16 '19 at 14:18
Vue is optimized to create/update your DOM elements based on data. Polymer does create a DOM node and internally implement lot os JS to create their own shadow DOM. Each Polyer component can have different life cycle (for Example and Table Component can actually creat TR,TD elements after some time of creating your Custom Table Polymer component). And Vue does not know this. — Cappittall, Apr 16 '19 at 14:19
Once the Dom for parent tag is created, Vue assumes its work is done. And if data change mean while it will remove it or update it. But Life Cycle of prevously create Polyermer component may still in progress..and you will get lot of exceptions in console. — Cappittall, Apr 16 '19 at 14:19

score 3 · Accepted Answer · answered Apr 18 '19 at 06:56

Yes, it's possible. Your code would've worked had it not been for your [incorrect] property declaration. You should see this error in the console:

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)

In Polymer, string properties with a default value can only be declared like this:

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

There is no shorthand for this. You might've confused the shorthand for the uninitialized property, which would be:

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

If you fix that bug, you'll notice your code works...

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>

Is it possible to pass data from Polymer component to Vue component?

1 Answers1