javascript - Vuejs - pass data from parent to child with props - Stack Overflow

admin管理员组

文章数量:1312652

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

App.vue

<script>
import Hello from './ponents/Hello'

export default {
  name: 'app',
  data() {
    return {
      myData: 'this is my data'
    }
  },
  ponents: {
    Hello
  } ...
 </script>

Hello.vue

<script>
export default {
  name: 'hello',
  props: ['myData'],
  data () {
    return {
      msg: 'Wele to Your Vue.js App'
    }
  }
  mounted: function() {
       console.log(this.myData)
   }
} ...
</script>

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

App.vue

<script>
import Hello from './ponents/Hello'

export default {
  name: 'app',
  data() {
    return {
      myData: 'this is my data'
    }
  },
  ponents: {
    Hello
  } ...
 </script>

Hello.vue

<script>
export default {
  name: 'hello',
  props: ['myData'],
  data () {
    return {
      msg: 'Wele to Your Vue.js App'
    }
  }
  mounted: function() {
       console.log(this.myData)
   }
} ...
</script>

• javascript
• vue.js

Share Improve this question Follow edited Jan 16, 2017 at 5:12 Amresh Venugopal 9,54955 gold badges4141 silver badges5252 bronze badges asked Jan 16, 2017 at 3:07 Stefan StoychevStefan Stoychev 5,02233 gold badges3636 silver badges5454 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

You need to use the child ponent 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 ponents data field, without using it, you will get myData as `string` in the child ponent.

<script>
  export default {
  name: 'app',
  data() {
    return {
      myData: 'this is my data'
    }
  },
  ponents: {
    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.ponent('hello', {
  render: function (createElement) {
    return createElement(
      <tag-names>
    )
  },
  props: {
    myData: parentComponent.myData // you need to give the parent ponents' data here.
  }
})

本文标签： javascriptVuejspass data from parent to child with propsStack Overflow