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

Question

父元素(x-app标签)显示child1(x-counter)，child2(child2-app)元素，每当child1有任何更改时，我也想将其更新为child2。因此，在父级中，我尝试使用 querySelect 获取子级 2 的属性，但得到的是 null 值。

准备好了(){ 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处执行相同的操作，以便在两者之间进行双向数据绑定(bind)两个子元素)。

在 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，这将在其他元素中受到影响。但请注意，如果您将此属性用作对象或数组。那么您可能需要额外的代码来对这两个元素进行可观察的更改。示例:this.notifyPath('myProperty.name');

编辑:下面的演示是用lit-element制作的

DEMO