2

显示 child1(x-counter)、child2(child2-app) 元素的父元素（x-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>

`;

}

4

1 回答 1

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，这将在其他元素中生效。但请注意，如果您将其用作此属性的objector array。那么您可能需要额外的代码来在两个元素上进行可观察的更改。例子：this.notifyPath('myProperty.name');

编辑：下面的演示是用lit-element

演示

于 2018-10-16T17:04:55.097 回答