Можно ли передавать данные из компонента Polymer в компонент Vue?
Приведенный ниже код - это то, что я хотел бы сделать, но в настоящее время он не работает. Я пытаюсь начать создавать компоненты Vue внутри своего приложения Polymer, чтобы постепенно перейти с 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 оптимизирован для создания/обновления элементов DOM на основе данных. Polymer создает DOM-узел и внутренне реализует lot os JS для создания собственного теневого DOM. Каждый компонент Polyer может иметь различный жизненный цикл (например, компонент Table может фактически создавать элементы TR, TD через некоторое время после создания компонента Custom Table Polymer). А Вью этого не знает.
Как только Dom для родительского тега создан, Vue предполагает, что его работа выполнена. И если данные изменятся значит пока он их удалит или обновит. Но жизненный цикл ранее созданного компонента Polyermer может все еще продолжаться... и вы получите множество исключений в консоли.
Ответы 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/[email protected]"></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>
Насколько я ищу, легко обмениваться данными, если ваш компонент vue находится вне полимера. но когда это внутри вот комментарий на одном из форумов: Нет нельзя. Рассказываю из опыта. Вот причина.: