Vue – very basic props example. Passing data to other components.

Props are really straight forward. Here is the most basic example….

I assume you have a running project, or at least know the basics of vue.

Lets say we have a vue component, maybe our index.vue. The key here is to import the component you are trying to pass variables to, and then passing the variables inline of the component call.

example “:yyyy=”2021” in the “modal” component the “yyyy” prop will be set to 2021 as a string.

<template>    
  </div>
  <modal :yyyy="2021" :mm="08" :dd="2021"></modal>
  </div>
</template>

<script>
import modal from "./modal.vue"

export default {
  data() {
    return {
    };
  },
  components: {
      modal
  },
  mounted(){
  },
  methods: {
  }
};
</script>

Below is an example using a more dynamic approach instead of statically passing variables

<template>    
  </div>
    <modal :yyyy="yyyy" :mm="mm" :dd="dd"></modal>
  </div>
</template>

<script>
import modal from "./modal.vue"

export default {
  data() {
    return {
      dd:null,
      mm:null,
      yyyy:null
    };
  },
  components: {
      modal
  },
  mounted(){
     this.dd = "4"
     this.mm = "12"
     this.yyyy = "1989"
  },
  methods: {
  }
};
</script>

Next, lets set up the component we are passing variables to. in my case, its the “modal” component…

In here, the key is setting up the props section to accept the passed information.

<template>
    <div>
       <h5>{{mm}}/{{dd}}/{{yyyy}}</h5>
    </div>
</template>

<script>

export default {
    name: 'App',
    components: {

    },props: {
        yyyy: String,
        mm: String,
        dd: String
    },
    methods: {
        test: function(){
            alert(this.yyyy + "/" + this.mm + "/" + this.dd)
        }
    }
}
</script>

And that’s it! your modal component will now be able to utilize the data we passed to it.

Below are the different prop types you can use…

props: {
  name: String,
  age: Number,
  isComplete: Boolean,
  skillsArray: Array,
  creditCardInfo: Object,
  callback: Function,
  CustomerPromise: Promise // or any other constructor
}

Vue – very basic props example. Passing data to other components.

admin