title: Access the $refs of a parent from a child - Vue.js
body: <p>Hopefully this has been answered before - essentially I'm trying to append a block ("CodeBlock.vue") to an element inside App.vue from an onClick event triggered inside a sibling of CodeBlock, and a child of App.vue, ("ButtonSidebar.vue"). I'm a little confused by emitting events and/or using an eventBus Vue instance, so any pointers would be greatly appreciated:</p>
  
  <p>So far I have the following. CodeBlock.vue which will be used as an instance and appended to a div inside App.vue.</p>
  
  <p>CodeBlock.vue:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div :class="type"&gt;
      THIS IS A CODE BLOCK!!
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: 'CodeBlock',
    props: [ 'type' ]
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>App.vue:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div id="app" class="container"&gt;
      &lt;ButtonSidebar/&gt;
      &lt;div id="pageBlocks" ref="container"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import Vue from 'vue'
  import BootstrapVue from 'bootstrap-vue'
  
  // import { eventBus } from './main'
  
  import AddTitle from './components/modules/AddTitle'
  import AddSubTitle from './components/modules/AddSubTitle'
  import ButtonSidebar from './components/modules/ButtonSidebar'
  import CodeBlock from './components/modules/CodeBlock'
  
  import 'bootstrap/dist/css/bootstrap.css'
  import 'bootstrap-vue/dist/bootstrap-vue.css'
  
  Vue.use(BootstrapVue)
  
  export default {
    name: 'App',
    components: {
      AddTitle,
      AddSubTitle,
      ButtonSidebar,
      CodeBlock
    }
  }
  &lt;/script&gt;
  
  &lt;style&gt;
  #app {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #1f1f1f;
    margin-top: 60px;
  }
  
  .no-border {
    border: unset !important;
    border: 0px !important;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>ButtonSidebar.vue:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;b-button class="btn-circle absolute-float-tight text-dark" v-on:click="reveal=!reveal"&gt;
        &lt;font-awesome-icon v-if="!reveal" :icon="faPlusIcon" /&gt;
        &lt;font-awesome-icon v-if="reveal" :icon="faMinusIcon" /&gt;
      &lt;/b-button&gt;
      &lt;transition name="custom-classes-transition" enter-active-class="animated bounceInDown" leave-active-class="animated bounceOutRight"&gt;
        &lt;div v-if="reveal" class="absolute-float-reveal"&gt;
          &lt;b-button class="btn-circle text-dark" v-on:click="addCodeBlock"&gt;&lt;font-awesome-icon :icon="faCodeIcon" /&gt;&lt;/b-button&gt;
        &lt;/div&gt;
      &lt;/transition&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import Vue from 'vue'
  
  import FontAwesomeIcon from '@fortawesome/vue-fontawesome'
  import faPlus from '@fortawesome/fontawesome-pro-regular/faPlus'
  import faMinus from '@fortawesome/fontawesome-pro-regular/faMinus'
  import faCode from '@fortawesome/fontawesome-pro-regular/faCode'
  
  import CodeBlock from './CodeBlock'
  
  export default {
    name: 'ButtonSidebar',
    computed: {
      faPlusIcon () {
        return faPlus
      },
      faMinusIcon () {
        return faMinus
      },
      faCodeIcon () {
        return faCode
      }
    },
    components: {
      FontAwesomeIcon,
      CodeBlock
    },
    data () {
      return {
        reveal: false
      }
    },
    props: ['codeBlocks'],
    methods: {
      addCodeBlock () {
        var ComponentClass = Vue.extend(CodeBlock)
        var instance = new ComponentClass({
          propsData: { type: 'primary' }
        })
        instance.$mount()
  
        this.$el.querySelector('#pageBlocks').appendChild(instance.$el)
      }
    }
  }
  &lt;/script&gt;
  
  &lt;style scoped&gt;
  
    .absolute-float-tight {
      left: 20px;
      position: absolute;
    }
  
    .absolute-float-reveal {
      left: 60px;
      position: absolute;
    }
  
    .btn-circle {
      background-color: transparent;
      border-radius: 50%;
      height: 34px;
      padding: 0;
      width: 34px;
    }
  
  &lt;/style&gt;
  </code></pre>
  
  <p>It's around the <code>this.$el.querySelector('#pageBlocks').appendChild(instance.$el)</code> part that I start to loose the plot a bit...I'm worried that I have to strip everything down and start again perhaps?</p>