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