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

Question

父元素（x-app标签）显示child1（x-counter），child2（child2-app）元素，每当child1有任何变化时，我也想将其更新为child2。因此，在父项中，我试图使用 querySelect 获取子项 2 的属性，但我得到的是空值。

准备好了(){ 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

制作的演示

DEMO

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

How to querySelect Lit-Element that is within another Lit-Element

jquery

web-frontend

polymer

polymer-3.x

lit-element