Polymer / Lit-element, дочерний компонент не рендерится повторно, когда свойство модифицируется родителем

Question

живой пример

В основном:

• Я помещаю дочерний компонент внутри родительского html.

• Дочерний компонент имеет свойство title внутри объекта static get properties().

• В родительском компоненте я присваиваю свойство title дочернего компонента частной переменной, которой нет в static get properties() объекта родительский компонент.

• Позже, в setTimeout внутри родительского компонента, я изменяю значение закрытой переменной.

• Дочерний Компонент не выполняет повторную визуализацию.

//inside parent component
render(){
 return html`
   <child-component title="${this._privateVariable}"></child-component>
 `
}

constructor(){
 super();
 this._privateVariable = 'lore ipsum'

 setTimeout(()=>{
  this._privateVariable = '123455667'
 }, 10000)
}

Теперь я знаю, что если я добавлю _privateVariable в static get properties() родительского компонента, дочерняя структура выполнит повторную визуализацию. , но это потому, что весь родительский объект выполняет повторную визуализацию.

После подключения к DOM дочерний компонент отслеживает свое свойство title, поэтому он должен понимать, что назначенное ему значение изменилось, и выполнить повторную визуализацию.

Я не понимаю, почему мне нужно перерисовать весь родительский элемент, чтобы перерисовать ребенка.

Использование консоли разработчика и доступ к компоненту в DOM:

• Если я изменю свойство дочернего компонента с помощью javascript, дочерний объект будет отрисовываться совершенно нормально, без необходимости перерисовать весь родительский элемент.

• Если я отредактирую дочерний компонент html и вручную изменю атрибут, дочерний объект будет отрисовываться совершенно нормально, без необходимости повторной визуализации весь родительский элемент.

Что мне здесь не хватает?

Answer 1

Я ответил на GitHub: https://github.com/Polymer/lit-element/issues/899#issuecomment -592295954

Но вот копия для других читателей:

@ dvolp, дочерний компонент наблюдает за свойством title, но он не соблюдает свойство _privateVariable родительского компонента. И без объявления _privateVariable в качестве свойства LitElement в объекте свойств stati c родительский компонент также не наблюдает за этим свойством.

Вам необходимо повторно визуализировать родительский объект при установке _privateVariable, поскольку повторная визуализация это то, что устанавливает свойство title дочернего элемента в текущее значение _privateVariable.

Привязка здесь выполняется только на рендере. Если это не запуск, нет ничего другого для установки свойства title:

//inside parent component
render(){
 return html`
   <child-component title="${this._privateVariable}"></child-component>
 `
}

Именно поэтому вы должны включить _privateVariable в объект свойств stati c родительского объекта, чтобы при установке это, родительский компонент уведомляется и повторно отображает, что, в свою очередь, устанавливает свойство title дочернего компонента.

Answer 2

В полимере свойства будут отслеживаться / наблюдаться на предмет изменений, только если они объявлены в разделе c get properties (). Поскольку вы не объявляете '_privateVariable' в родительском разделе properties (), любые внесенные в него изменения не будут внедрены обратно в дочерний компонент, и, следовательно, значение не будет обновлено. Когда вы изменяете значение _privateVariable после объявления его в parent, полный parent не будет перезагружен, так как будет загружен только дочерний компонент. Однако, если у вас все еще есть требование не объявлять '_privateVaraible' в родительском элементе и вам все еще требуется обновление, вы можете обновить значение переменной в дочернем компоненте и инкапсулировать обновление в функцию и вызвать эту функцию из setTimeout вашего родителя.