下面的代码是我想做的，但它目前不起作用。我正在尝试开始在我的 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>
最佳答案
是的，这是可能的。如果不是您的 [incorrect] 属性声明，您的代码就会起作用。您应该在控制台中看到此错误:
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>关于vue.js - 是否可以将数据从 Polymer 组件传递到 Vue 组件？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55695301/