title: How do I place dynamic content into a QML component
body: <p>I'm having a lot of trouble creating extendable components in QML. There are techniques which work but what I'd like to do is something like this:</p>
  
  <pre><code>//Outline.qml
  Rectangle {
    color: 'red'
    //Children are inserted here
  }
  
  //main.qml
  Rectangle {
    ... 
    Outline {
      Text { I'm trying to inject this into the Outline component
        text: "Hi I'm the inner text!"
      }
    }
  }
  </code></pre>
  
  <p>I know I can achieve this by using a <code>Loader</code> component and setting the <code>sourceComponent</code> to a <code>Component</code> instance but when I'm doing anything moderately complex (reusable dialogs for instance) my ability to write functions and reference the instance of a child component is hampered. If the component was instantiated in the same QML file the id/function relationship would be fine and I could simply reference my text fields directly.</p>
  
  <p>Here's an example of the loader:</p>
  
  <pre><code>//Outline.qml
  Rectangle {
    id : root
    color: 'red'
    property Component content;
    Loader {
      source : root.content
    }
  }
  
  //main.qml
  Rectangle {
    function getData(){
       return inner.getData(); 
       //ERROR inner is undefined because it is created by the Loader instance.
    }
    ... 
    Outline {
      content: Component {
          TextField {
            id: inner
            function getData(){
              return inner.text || 'none';
            }
          }
      }
    }
  }
  </code></pre>
  
  <p>I would love an better way to handle it. I know I can build a Component directly inside the parent and achieve a top level reference, but it doesn't allow for the level of control I'm looking for. A 'static' extension of the component would be preferable in this case.</p>
  
  <p><strong>EDIT:</strong> here's a QML example that illustrates the problem. On click the output is:
  <code>ReferenceError: getMe is not defined</code></p>
  
  <pre><code>import QtQuick 2.2
  import QtQuick.Controls 1.0
  import QtQuick.Layouts 1.1
  
  Item {
      id: app
      width: 640
      height: 480
  
      function accessData(){
          output.text = getMe.text
      }
  
      Loader {
          width: parent.width
          height: 300
          sourceComponent: Component {
              Rectangle {
                  anchors.fill: parent
                  color: 'yellow'
  
                  TextField {
                      anchors.centerIn: parent
                      id: getMe
                      placeholderText: 'Input data...'
                  }
              }
          }
      }
  
  
      Button {
          id: button
          y: app.height - 50
          text: 'get data'
          onClicked: {
              accessData();
          }
      }
  
      Text {
          y: app.height - button.height
          id: output
          text: 'none'
      }
  }
  </code></pre>
  
  <p>As you can see when you use the "loader" method the sourceComponent isn't part of the same tree (you can't access the inner data).</p>