Ich kann keine Daten von vue.js übergeben

Question

Ich bin neu in vue.js .. Ich benutze Webpack + Vue-CLI.

Aber ich kann nicht die Daten von Eltern auf das Kind

Code wie folgt passieren ..

<template lang="html"> 
 
    <div> 
 
    <input v-model="parentMsg"></input> 
 
    <br> 
 
    <child v-bind:msg="parentMsg"></child> 
 
    </div> 
 
</template> 
 

 
<script> 
 
import child from './components/lists' 
 
export default { 
 
    data: function() { 
 
    return { 
 
     parentMsg: '' 
 
    } 
 
    }, 
 
    computed: {}, 
 
    ready: function() {}, 
 
    attached: function() {}, 
 
    methods: {}, 
 
    components: { 
 
    child 
 
    } 
 
} 
 
</script>

<template> 
 
    <div> 
 
    {{msg}} 
 
    </div> 
 
</template> 
 

 
<script> 
 
export default { 
 
    data: function() { 
 
    return { 
 
     msg: '' 
 
    } 
 
    } 
 
} 
 
</script>

Durch die wa y ... Wie Kind Komponenten an die Mutter Array zu binden ..

parent: data: array[...], 
I want to bind the first of children's data to arr[0] 
second to array[1].. 

Ist das möglich ?? oder benutze v-for ??

Answer 1

In Ihrem Kind Komponente die props Eigenschaft verwenden, um übergeordnete Daten wie zu erhalten:

<script> 
export default { 
    props: ['msg'], 
    data: function() { 
    return { 

    } 
    } 
} 
</script> 

Lesen Sie mehr über diesen here