With DML, it's very easy to make Parent / Child communication.
// make : wrapper around createElement
const cType = (type) => (content, props) => make(type, props, content)
const h1 = cType("h1");
const div = cType("div");
const button = cType("button");
const br = () => make("br");
function Parent () {
selectBase(div('', "background:darkorange; padding:10px; margin:10px"))
h1("Parent")
let c = Counter();
br()
button("inc child counter").onclick = () => c.incby(1);
unselectBase()
}
function Counter () {
selectBase(div("I am the child...", "border: 1px solid red; padding:10px;background:orange"))
let value = div("0");
let incby = (val) => value.innerText = Number(value.innerText)+val
button("inc").onclick = () => incby(1);
button("dec").onclick = () => incby(-1);
unselectBase()
return { incby }
}
Parent();
Parent();
Parent()
You try it here : ParentChild
Top comments (0)