Для наследования свойств контейнера другим контейнером необходимо указать поле container_extend: "имя_наследуемого_компонента". В родительском компоненте также можно указать поле share_props: numb, где numb - число свойств массива props, которые позволяет наследовать родительский контейнер.
Пример использования:
<div data-test_container="container" class="card col-3" style="color: red;">
<p data-test_container-main_text="text">контейнер первый</p>
<button data-test_container-click="click">click </button>
</div>
<div data-test_container_2="container" class="card col-3" style="color: red; margin-top: 10px;">
<p data-test_container_2-main_text="text">контейнер второй</p>
<p data-test_container_2-text2="text">click there...</p>
<button data-test_container_2-click="click">click </button>
</div>
В html разметке второго контейнера, который наследует свойства первого, должны быть все наследуемые свойства первого контейнера с такими-же именами.
var StateMap = {
test_container: {
container: "test_container",
/// share_props - разрешает унаследовать только первые два свойства "main_text" и "click"
///если не указать то можно будет унаследовать все свойства
share_props: 2,
props: [ "main_text", ["click", "click", "button:first-of-type"], ["hover", "mouseover", ""] ],
methods: {
click: function(){
var text = this.parent.props.main_text.getProp();
this.parent.props.main_text.setProp(text + " 1");
},
hover: function(){ //это свойство наследоваться не будет так как его номер в массиве = 3, а мы наследуем только первые два
var text = this.parent.props.main_text.getProp();
this.parent.props.main_text.setProp(text + " 2");
}
},
},
test_container_2: {
container: "test_container_2",
///наследует свойства контейнера - компонента test_container,
//здесь указывается имя компонента из контейнера которого будут унаследованы свойства,
//если бы это был контейнер из виртуального или обычного массива, нужно указать имя массива
container_extend: "test_container",
///и добавляет два своих "text2", ['click2'
props: ["text2", ['click2', "click", "[data-test_container_2-text2='text']"] ],
methods: {
click2: function(){
var text = this.parent.props.main_text.getProp(); ///обращаемся в новом методе к свойству main_text которое унаследовали от контейнера test_container
this.parent.props.main_text.setProp(text + " 2");
}
},
},
}
Итак в примере выше мы унаследовали два первых свойства: "main_text" и "click" из контейнера test_container и добавили два новых: "text2" и'click2.
Ограничения по наследованию
При создании цепочки наследований наследуемые компоненты в описании приложения должны располагаться в той последовательности в которой они наследуют свойства. Например если у нас три контейнера и мы переместим 3-й контейнер который наследует свойства 2-го из данного списка вверх на позицию 1, он не унаследует свойства первого контейнера т.к. инициализируется раньше второго в котором еще нет свойств из контейнера 1.
При использовании fetchComponents наследование свойств от уже унаследованных компонентов, может вести себя непредсказуемо, поэтому лучше загружать недостающие шаблоны с помощью stateSettings:{ templateVar: templ,}
При использовании virtualArrayComponents необходимо учитывать то, что создание контейнеров из виртуальных массивов зависит от создания свойств group или render-variant родительских контейнеров, т .к. инициализация виртуальных массивов происходит в данных свойствах( либо в самом конце в методе verifiTemplateVarComponents или verifyFetchComponents если данные свойства изначально должны быть без дочерних компонентов). Поэтому если контейнер из виртуального массива уже наследует свойства другого виртуального массива, то от него можно наследовать свойства, только если он является родительским по отношению к тому который наследует ( Тот который наследует свойства помещен в свойство group или render-variant того у которого он наследует).
В контейнере сначала создаются унаследованные свойства, а затем собственные свойства, это необходимо учитывать при объявлении share_props