vue.js의 하위 구성 요소에 데이터를 전달하는 방법

vue.js의 하위 구성 요소에 데이터를 전달하는 방법

vue.js는 처음이며 하위 구성 요소에 값을 전달하려고 합니다.

HTML

<div id="example">
   <my-component v-bind:data="parentData"></my-component>
</div>

JS

Vue.component('my-component', {
  props: ['data'],
  template: '<div>Parent component with data: {{ data.value }}!<div is="my-component-child" v-bind:data="childData"></div></div>'
});

Vue.component('my-component-child', {
  props: ['data'],
  template: '<div>Child component with data: {{ data.value }} </div>'
});

new Vue({
  el: '#example',
  data: {
    parentData: {
      value: 'hello parent!'
    },
    childData: {
      value: 'hello child!'
    }
  }
});

https://jsfiddle.net/v9osont9/2/

그리고 다음과 같은 오류가 있습니다.

[Vue warn] :속성 또는 메서드 "childData"는 인스턴스에서 정의되지 않지만 렌더링 중에 참조됩니다.데이터 옵션에서 비활성 데이터 속성을 선언하십시오.(에 기재되어 있습니다).

[Vue warn] :렌더링 함수 오류: ( 참조)

TypeError: 정의되지 않은 속성 '값'을 읽을 수 없습니다.

어떻게 하면 좋을까요?

전화할 때

<my-component v-bind:data="parentData"></my-component> 

당신은 단지 통과하고 있다.parentData부모 컴포넌트 및childData범위를 벗어납니다.

넌 네 몸을 담아야죠.childData당신의 안에서parentData:

new Vue({
    el: '#example',
    data: {
        parentData: {
            value: 'hello parent!',
            childData: {
                value: 'hello child!'
            }
        }
    }
});

이렇게 자녀에게 전해줍니다.

<div is="my-component-child" v-bind:data="data.childData"> 

언급URL : https://stackoverflow.com/questions/47331308/how-to-pass-data-to-child-component-in-vue-js