title: Vue single file components: Printing component element from child component
body: <p>I'm using @vue/vli 4.1.1 with single file components.  A simplified structure of my application looks like this:</p>
  
  <pre><code>src
  ├── App.vue
  ├── assets
  ├── components
  │   ├── PrintRecipe.vue
  │   └── Recipe.vue
  └── main.js
  </code></pre>
  
  <p>Inside the Recipe component, I would like to include a print button and its functionality, as implemented in the PrintRecipe component. When the button is pressed, the <code>#recipe</code> element from the Recipe component should be printed.</p>
  
  <p>Here is a dummy version of Recipe.vue:</p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;div id="other-content"&gt;
              ...
          &lt;/div&gt; 
          &lt;div id="recipe"&gt;
              ...
          &lt;/div&gt; 
          &lt;PrintRecipe/&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import PrintRecipe from './PrintRecipe.vue'
  
  export default {
    components: {
      PrintRecipe
    },
    ...
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>and this is a dummy version of PrintRecipe.vue:</p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;button @click="printRecipe"&gt;Print recipe&lt;/button&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { Printd } from 'printd';
  
  export default {
    mounted() {      
      this.d = new Printd()
    },
    methods: {
      printRecipe () {
        this.d.print( this.$el, [this.cssText])
      }
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>Currently this opens a print view, where the document to be printed only contains "Print recipe".</p>
  
  <p>Is there a way that I can access the elements from the template of Recipe.vue in order to be able to print them?  </p>
  
  <p>I have done some research and so far I only see information on how to access data from the parent component, not elements.</p>