Question

22

Vuejs - pass data from parent to child with props

rated 0 times [ 24] [ 2] / answers: 1 / hits: 15950 / 7 Years ago, mon, january 16, 2017, 12:00:00

I have started playing with Vue but faced an issue when trying to pass data to a component using props. In the code below this.myData (in the Hello.vue) is undefined for some reason

App.vue

<script>

import Hello from './components/Hello'



export default {

  name: 'app',

  data() {

    return {

      myData: 'this is my data'

    }

  },

  components: {

    Hello

  } ...

 </script>

Hello.vue

<script>

export default {

  name: 'hello',

  props: ['myData'],

  data () {

    return {

      msg: 'Welcome to Your Vue.js App'

    }

  }

  mounted: function() {

       console.log(this.myData)

   }

} ...

</script>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

vanessag

Add To Favorites

Follow

Total Points: 170

Total Questions: 98

Total Answers: 88

Location: El Salvador

Member since Sun, Sep 12, 2021

3 Years ago

answered 7 Years ago jaelynncherokeeg · Accepted Answer

You need to use the child component in the parent like, so:

// inside app.vue

<template>

  <hello :myData='myData'></hello> // I believe this is your objective

</template> //:myData is binding the property from the components data field, without using it, you will get myData as `string` in the child component.



<script>

  export default {

  name: 'app',

  data() {

    return {

      myData: 'this is my data'

    }

  },

  components: {

    Hello

  }

</script>

OP requested a way to pass in props to a child without rendering the child in the template.

So I am posting a link to the documentation

Vue.component('hello', {

  render: function (createElement) {

    return createElement(

      <tag-names>

    )

  },

  props: {

    myData: parentComponent.myData // you need to give the parent components' data here.

  }

})