Vuejs - Daten von Eltern zu Kind mit Requisiten übergeben

Question

Ich habe angefangen zu spielen mit Vue, aber ein Problem beim Versuch, Daten an eine Komponente mit props übergeben. In dem folgenden Code this.myData (im Hello.vue) ist undefined aus irgendeinem Grund

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> 

Answer 1

Sie müssen die untergeordnete Komponente in der übergeordneten verwenden wie , 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 angefordert einen Weg zu p Ass in Requisiten zu einem Kind, ohne das Kind in der Vorlage zu rendern.

So einen Link zu der ich bin Entsendung documentation

Vue.component('hello', { 
    render: function (createElement) { 
    return createElement(
     <tag-names> 
    ) 
    }, 
    props: { 
    myData: parentComponent.myData // you need to give the parent components' data here. 
    } 
})