VueJS: How can I pass params into a component?

Question

I am new to vueJS. What I want to do is passing parameters to a component, depending on the selection of the routes. Here is my App.vue:

<template>
  <div id="main">
    <header>
      <h1 style="color:red">{{msg}}</h1>
    </header>

    <div>
      <aside class="sidebar">
        <router-link v-for="el in this.$router.options.routes" :to="el">
          {{el.name}}
        </router-link>
      </aside>
      <SubMenu></SubMenu>

      <div class="content">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>


<script>
  import SubMenu from './components/SubMenu.vue'
  export default {
    components: {
      'SubMenu': SubMenu
    },
    data() {
      return {
        msg: 'Welcome to Your Vue.js App'      }
    }
  }

</script>

<style>
  @import 'style.css';
  @import 'grid.css';
</style>

and the SubMenu component I would like to make dynamic:

<template>
  <div>
    something dynamic
  </div>
</template>

How can I pass some parameters to use in the component? thank you

Answer 1

Welcome to SO,

In Vue.js passing parameters to components is called "Props"

You can pass props to your SubMenu like below

<SubMenu :id="12345" someText="Some Text About Something" :dataArray="[1,2,3,4,5]" />

then inside your SubMenu component you can define Prop Types as below

props: ['dataArray'] 

or

props: {
  dataArray: {
   type: Array,
   default: []
  }
}

After that you can use the data you passed to your liking

You can also read up on this Vue Documentation regarding the Props, which has much more detailed explanations about various Props related stuff and sample code

Answer 2

Your App.vue can be like this:

<template>
  <div id="main">
    <header>
      <h1 style="color:red">{{msg}}</h1>
    </header>

    <div>
      <aside class="sidebar">
        <router-link v-for="el in this.$router.options.routes" :to="el">
          {{el.name}}
        </router-link>
      </aside>
      <SubMenu :menuTitle="subMenuTitle"></SubMenu>

      <div class="content">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>


<script>
  import SubMenu from './components/SubMenu.vue';

  export default {
    components: {
      SubMenu
    },
    data() {
      return {
        subMenuTitle: "This is the sub menu",
        msg: 'Welcome to Your Vue.js App'      
      }
    }
  }

</script>

<style>
  @import 'style.css';
  @import 'grid.css';
</style>

The SubMenu.vue component could be like this:

<template>
  <div>
    <h2>{{ menuTitle }}</h2>
    something dynamic
  </div>
</template>

<script>
export default {
  name: "SubMenu",
  props: {
    menuTitle: String,
  }
}
</script>

In the SubMenu component that was used in App.vue, notice the colon that appears before the menuTitle attribute. When you do that before an attribute, the value of that attribute would be evaluated by Vue and passed to the component. You can pass literal Javascript expressions or items in your App.vue component.

In the SubMenu component, you can use the props in whatever way you can. If the prop's value is an array, you can use the v-for directive with it to create a list of items in the SubMenu.

Answer 3

Ok many thanks to both.

But what if I would like to pass something that depends on the voices in router-link? I mean, router-link prints a menu with 4 voices...what if I would like a behavior like this:

click on voice1 in router-link ---> pass this object ['input1', 'input2'] to SubMenu

click on voice2 in router-link ---> pass this other object ['input3', 'input4', 'input5'] to SubMenu

and so on.

thanks again :)