Vuejs - 小道具を持つ親から子にデータを渡す

Question

私はVueで遊び始めましたが、propsを使ってデータをコンポーネントに渡そうとすると問題が発生しました。 （Hello.vue中）this.myData以下のコードでは、いくつかの理由でundefinedある

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

、そう：

// 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はpへの方法を要求しました子どもをテンプレートにすることなく小道具を子供にぶち当てる。

だから私ははいこの方法が動作しているdocumentation

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