如何查询选择位于另一个 Lit-Element 内的 Lit-Element
2018-10-16
1367
父元素（x-app 标签）显示 child1（x-counter）、child2（child2-app）元素，并且每当 child1 发生任何变化时，我都想将其更新到 child2。因此，在父级中，我尝试使用 querySelect 获取 child 2 的属性，但我得到的是空值。
ready(){ super.ready();
document.querySelector('x-counter').addEventListener('valueChange',function(e){
this.b = e.detail;
const val = document.querySelector('x-app');
console.log(val.querySelector('child2-app');
val.a = this.b;
});
>
static get template(){
return html`
<x-counter></x-counter>
<child2-app></child2-app>
`;
>
1个回答
这里是父级
x-app
元素属性共享示例：
static get template(){
return html`
<x-counter my-property = "{{myProperty}}" ></x-counter>
<child2-app my-property = "{{myProperty}}" ></child2-app>
`;
}
下面是
x-counter
元素内部需要声明的（同样，您需要在
child2-app
中执行相同操作，以便在两个子元素之间进行双向数据绑定）。
在
x-counter
和
child2-app
元素中使用相同的属性声明：
static get properties() {
return {
myProperty: { // my-property will be myProperty (camelCase syntaxt at child)
notify:true //notify will alove up-side (from child to parent) data bind
}
}}
因此，两个子元素中都有 myProperty，如果您更改一个子元素内的 myProperty 元素，这将影响其他子元素。但请注意，如果您将此属性用作
object
或
array
。那么您可能需要额外的代码才能在两个元素上观察到更改。例如：
this.notifyPath('myProperty.name');
编辑：下面是用
lit-element
Cappittall
2018-10-16