Как сделать запросВыберите Lit-Element, который находится внутри другого Lit-Element - PullRequest
Новая
       38

Как сделать запросВыберите Lit-Element, который находится внутри другого Lit-Element

0 голосов
/ 16 октября 2018

Родительский элемент (тег x-app), отображающий элементы child1 (x-counter), child2 (child2-app) и всякий раз, когда есть какие-либо изменения в child1, я также хотел бы обновить его до child2.Итак, в родительском объекте я пытаюсь получить свойство потомка 2 с помощью querySelect, но получаю нулевое значение.

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 Ответ

0 голосов
/ 16 октября 2018

Здесь родительский 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

...