我有一个非常简单的项目:
app/
parent.html
child.html
index.html
我尝试将数据从父级传递给子级，然后在 Polymer() 中获取它们:
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="app/parent.html"/>
</head>
<body>
<h1>Hello Paul!</h1>
<x-comphost></x-comphost>
</body>
</html>
app/parent.html
<link rel="import" href="child.html"/>
<dom-module id="x-comphost" noscript>
<template>
<h4>Hello, man!</h4>
<p>I'm seeking a child</p>
<x-child accessible-policies="{{policies}}"></x-child>
</template>
<script>
Polymer({
is: "x-comphost",
ready: function(){
this.policies = ['Hospital', 'Dental', 'Travel'];
}
});
</script>
</dom-module>
app/child.html
<dom-module id="x-child" noscript>
<template>
[[accessiblePolicies]]
<h5>Hello again!</h5>
<p>Remember me?</p>
</template>
<script>
Polymer({
is: "x-child",
properties: {},
ready: function () {
console.log('thisData', this.__data__);
}
});
</script>
</dom-module>
问题在于，仅当从主机传输的数据在模板开启标记旁边隐式声明(如上所示)时，Polymer 才会看到 this.__data__。如果我把它从那里删除，它就看不到它了。所以这看起来像是一个诡计。我不想将该数据放置在模板中，我想在 Polymer 函数中使用它。但我不知道如何正确地实现这一目标，什么是没有任何技巧的正确方法。
我相信有人知道。
最佳答案
您可以通过 JavaScript 接口(interface)传递数据，只需将以下内容添加到您的父 (x-comphost) 实现中即可:
Polymer({
is: "x-comphost",
ready: function(){
this.policies = ['Hospital', 'Dental', 'Travel'];
/* Query shadow DOM for the x-child element */
var childEl = Polymer.dom(this.root).querySelector('x-child');
childEl.accessiblePolicies = this.policies;
}
});
关于javascript - Polymer : can't get this. __data__ 从主机传入，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39478627/