Question

显示child1（x-counter），child2（child2-app）元素的父元素（x-app标签），并且每当child1发生任何变化时，我也希望将其更新为child2。因此，在父级中，我试图使用querySelect获取子级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;


});

}

静态获取模板（）{

return html`
  <x-counter></x-counter>
<child2-app></child2-app>

`;

}

Answer 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制作的演示</ p>

DEMO

如何查询选择另一个Lit-Element中的Lit-Element

1 个答案: