QML: How to add children to a base component's child instead of the root object of the component?

Question

I have a base component named MyChart.qml like this

Item {
    id: root
    
    ChartView {
        id: myChartView
    }
    
    RowLayout {
        id: myToolbar
        }
    }
}

So it's basically a chart with a toolbar underneath it. I inherit this component in another component like this:

MyChart {
    *List of Children*
}

Here, how can I add the List of Children to myToolbar instead of root of the MyChart component?

Answer 1

Every item has the property data which is used as default property when you add an object inside another. Default property mean if you don't specify any property is assumed to be that one.

eg: States has default property states: [], so you can do

States {
   State{},
   State{}
}

beacause they all refer to that default property. So, about your example it's enough to expose the default property of the component you want to be the direct father of your component

MyChart.qml

Item {
   id: root
   
   default property alias data: myToolbar.data
   
   ChartView {
      id: myChartView
   }
   
   RowLayout {
      id: myToolbar
   }
}

Now any child coponent you use will be added directly inside the rowlayout

MyChart {
    Rectangle { width: 100; height: 100; color:"red"}
    Rectangle { width: 100; height: 100; color:"skyblue"}
}