Для наследования отдельных свойств нужно указать в массиве props - имя свойства, тип="extend", имя родительского компонента, а также тип наследуемых свойств: "arrayProps" - свойства массива, "props" - свойства контейнера.
props: [ ["name", "extend", "component_name", "propsType"], …. ].
Если свойства в компоненте от которого наследуются в html разметке указаны с помощью data- атрибутов, то в компоненте который их наследует они должны быть также указаны в html разметке.
html:
<div data-test_container="container" class="card col-3" style="color: red;">
<p data-test_container-main_text="text" data-test_container-click="click">click_1</p>
</div>
<!-- указываем наследуемые свойства в html -->
<div data-test_container_2="container" class="card col-3" style="color: red; margin-top: 10px;">
<p data-test_container_2-main_text="text" data-test_container_2-click="click">click_1</p>
<p data-test_container_2-text2="text" data-test_container_2-click2="click" >click_2</p>
</div>
javascript:
var StateMap = {
test_container: {
container: "test_container",
props: [ "main_text", "click" ],
methods: {
click: function(){
var text = this.parent.props.main_text.getProp();
this.parent.props.main_text.setProp(text + " 1");
},
},
},
test_container_2: {
container: "test_container_2",
/// наследует два свойства props из контейнера test_container
props: ["text2", 'click2', ["main_text", "extend", "test_container", "props"], ["click", "extend", "test_container", "props"] ],
methods: {
click2: function(){
var text = this.parent.props.text2.getProp();
this.parent.props.text2.setProp(text + " 2");
}
},
},
}
window.onload = function(){
var HM = new HTMLixState(StateMap);
console.log(HM);
}