Vuejs - 부모와 자식 사이에 소품이있는 데이터 전달

Vue으로 게임을 시작했지만 props을 사용하여 데이터를 구성 요소로 전달할 때 문제가 발생했습니다. 합니다 (Hello.vue에서) this.myData 아래의 코드에서 어떤 이유로 undefined입니다Vuejs - 부모와 자식 사이에 소품이있는 데이터 전달

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>

출처

2017-01-16 Stefan Stoichev

, 그래서 :

// 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. 
    } 
})

출처

2017-01-16 04:26:09

에 대한 링크를 게시하고있다. 따라서 데이터는 항상 템플릿을 통과해야합니까? 만약 내가 단지 그것을 렌더링하지 않고 데이터를 전달하기를 원한다면 (예를 들어 몇몇 설정들)? –

'eventBus'를 사용하거나 vuex 스토어를 사용하는 것과 같은 템플릿 렌더링을 필요로하지 않는 구성 요소간에 데이터 교환을 수행 할 수있는 방법이 있습니다. 소품은 이동하는 가장 좋은 방법 인 것처럼 보이며 어린이를 렌더링해야합니다. 템플릿의 구성 요소입니다. 방법은 있지만, 아픈 그것에 대한 내 대답을 업데이 트하지만 그 렌더링 기능을 호출합니다. 괜찮은 것 같니? –

감사합니다. 나는 소품을 사용하는 것을 꺼린다. 그것을 할 올바른 방법입니다. 그냥 데이터가 템플릿을 통해 전송된다는 사실을 알지 못합니다. –

Vuejs - 부모와 자식 사이에 소품이있는 데이터 전달

답변

관련 문제