title: Scroll to section from child component in Vue.js
body: <p>I am trying to understand how to emit an event from a child component to the parent that scrolls to the correct section via a ref or id. So for example the navigation menu is a child component with links. when I click a link, the corresponding section in the parent  scrolls into view. I am coming from React so I am a bit thrown off. How do I pass parameters up to scroll to correct ref or id? basically the way anchorlinks act.</p>
  <p>Here is what I got so far.. I am not sure I should be using links , I might need buttons since i'm not navigating pages.</p>
  <p>Navigation.vue (Child)</p>
  <pre><code>&lt;template&gt;
    &lt;div class=&quot;navigation&quot;&gt;
      &lt;img class=&quot;logo&quot; alt=&quot;Vue logo&quot; src=&quot;../assets/logo.png&quot; /&gt;
      &lt;nav&gt;
        &lt;ul&gt;
          &lt;li&gt;
            &lt;a @click=&quot;goSection&quot; href=&quot;/&quot;&gt;Contact&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a href=&quot;/&quot;&gt;Projects&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a href=&quot;/&quot;&gt;Skills&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a href=&quot;/&quot;&gt;Education&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/nav&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: &quot;Navigation&quot;,
    //I want to emit an event in the parent where the page section scrolls in to view//
    methods: {
      goSection() {
        this.$emit(&quot;go-section&quot;, this.value);
      },
    },
  };
  &lt;/script&gt;
  </code></pre>
  <p>App.vue (Parent)</p>
  <pre><code>&lt;template&gt;
    &lt;div id=&quot;app&quot;&gt;
      &lt;Navigation @go-section=&quot;goToSection&quot; /&gt;
      
      &lt;section class=&quot;section&quot; ref=&quot;projects&quot;&gt;
        &lt;p&gt;Projects&lt;/p&gt;
      &lt;/section&gt;
      &lt;section class=&quot;section&quot; ref=&quot;skills&quot;&gt;
        &lt;p&gt;Skills&lt;/p&gt;
      &lt;/section&gt;
      &lt;section class=&quot;section&quot; ref=&quot;contact&quot;&gt;
        &lt;p&gt;Contacts&lt;/p&gt;
      &lt;/section&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import Navigation from &quot;./components/Navigation.vue&quot;;
  export default {
    name: &quot;App&quot;,
    components: {
      Navigation,
    },
    methods: {
      goToSection(event, value) {
        var element = this.$refs[(event, value)];
        var top = element.offsetTop;
        window.scrollTo(0, top);
      },
    },
  };
  &lt;/script&gt;
  </code></pre>