title: Pass event from parent to child
body: <p>I have an AppRoot.vue, AppToolbar.vue and AppDrawer.vue</p>
  
  <p>I need to change the isDrawerOpen variable of the AppDrawer.vue when I click a button in AppToolbar.vue,  and  are declared in AppRoot.vue.</p>
  
  <p>How can I do this? Can anyone help me?</p>
  
  <p>AppRoot.vue</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;template&gt;
      &lt;v-app id="app-root"&gt;
          &lt;app-drawer&gt;&lt;/app-drawer&gt;
          &lt;app-toolbar :title="title"&gt;&lt;/app-toolbar&gt;
          &lt;v-content&gt;
              &lt;v-container&gt;
                  &lt;slot&gt;&lt;h1&gt;Não há nada para exibir aqui!&lt;/h1&gt;&lt;/slot&gt;
              &lt;/v-container&gt;
          &lt;/v-content&gt;
          &lt;app-footer&gt;&lt;/app-footer&gt;
      &lt;/v-app&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          name: 'app-root',
          props: ['title'],
      }
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>AppToolbar.vue</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;template&gt;
      &lt;v-toolbar :color="$color" app&gt;
  
          &lt;v-layout row hidden-md-and-up&gt;
              &lt;v-toolbar-side-icon @click="openDrawer" class="white--text"&gt;&lt;/v-toolbar-side-icon&gt;
          &lt;/v-layout&gt;
  
          &lt;v-toolbar-title class="white--text" v-text="title"&gt;&lt;/v-toolbar-title&gt;
  
      &lt;/v-toolbar&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          name: 'app-toolbar',
          props: ['title'],
          methods: {
              openDrawer() {
  
              }
          }
      }
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>AppDrawer.vue
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;template&gt;
      &lt;v-navigation-drawer temporary v-model="isDrawerOpen" absolute&gt;
          &lt;v-list class="pa-1"&gt;
              &lt;v-list-tile avatar&gt;
                  &lt;v-list-tile-avatar&gt;
                      &lt;img src="https://rafaeldeveloper.com.br/img/rafael_developer.jpg"&gt;
                  &lt;/v-list-tile-avatar&gt;
                  &lt;v-list-tile-content&gt;
                      &lt;v-list-tile-title&gt;Rafael de Azeredo&lt;/v-list-tile-title&gt;
                  &lt;/v-list-tile-content&gt;
              &lt;/v-list-tile&gt;
          &lt;/v-list&gt;
      &lt;/v-navigation-drawer&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          name: 'app-drawer',
          data: () =&gt; ({
              isDrawerOpen: false
          })
      }
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>