How can i pass a parameter to a Vue component?

Question

I just got started to Vue and i'm trying to understand some basic concepts such as conditional rendering and how to pass data from where i load the app to a component. Suppose i'm rendering a Vue component like this:

<div id="app">
    <myComponent></myComponent>
</div>

Suppose myComponent looks like this:

<template>
  <div>
  
    <h1>First block</h1>

    </h1>Second block</h1>

  </div>
</template>

I want to be able to render First block or Second block when i load the Vue app according to a parameter i pass to the component, like:

<div id="app">
    <myComponent id="first"></myComponent>
</div>

In this case i should see First block, whereas if instead of id="first" there was id="second" the output was supposed to be Second block. How can i do this?

I know it's a very basic question, but most of the sources i found explained how to do the opposite. Any kind of advice is appreciated!

tony19 · Accepted Answer · 2022-07-15 23:23:21Z

3

In vue you could pass props (parameters) to component which defines this ones in its script like :

<template>
  <div>
  
    <h1 v-if="block==='first'">First block</h1>

    </h1 v-else>Second block</h1>

  </div>
</template>

<script>
export default{
  props:{
    block:{
       type:String, 
        default:'first'
     }
  }
}
</script>

in parent component pass the prop like :

<div id="app">
    <myComponent block="first"></myComponent>
</div>

or

<div id="app">
    <myComponent block="second"></myComponent>
</div>

edited Jul 15, 2022 at 23:23

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Dec 26, 2020 at 11:00

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How can i pass a parameter to a Vue component?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related