상위 구성 요소에서 하위 구성 요소로 데이터 개체 전달

상위 구성 요소에서 하위 구성 요소로 데이터 개체 전달

도구 목록을 만들고 있어요.

단일 파일 템플릿을 사용하여 상위 구성 요소(도구 목록)에서 각 하위 구성 요소(도구 항목)로 전체 도구 데이터 개체를 전달하려고 합니다.

자 컴포넌트에서 다음 오류가 나타납니다.

속성 또는 메서드 "..."은 인스턴스에서 정의되지 않지만 렌더링 중에 참조됩니다.데이터 옵션에서 비활성 데이터 속성을 선언하십시오.

어디에...툴 데이터 객체의 속성입니다.title또는description.

설정은 다음과 같습니다.

Tools.vue(부모):

<template>
    <main id="tools">
        <tool v-for="tool in tools" :data="tool" :key="tool.id"></tool>
    </main>
</template>

<script>
    import Tool from './Tool.vue'

    let test = {
        id: 1,
        title: 'Title',
        description: 'Description'
    };

    export default {
        data() {
            return {
                tools: [
                    test
                ]
            }
        },

        components: {'tool': Tool}
    }
</script>

Tool.vue(자녀):

<template>
    <div class="tool">
        <div class="title">{{ title }}</div>
        <div class="description">{{ description }}</div>
    </div>
</template>

<script>
    export default {}
</script>

간단해야 하는데, 구글푸로 해결책을 찾을 수 없어요.내가 뭘 놓쳤지?

툴 오브젝트 전체를 전달하려면 먼저 속성을 선언합니다.

export default {
  props: ["tool"]
}

그리고 나서, 그것을 사용해서v-for.

<tool v-for="tool in tools" :tool="tool" :key="tool.id"></tool>

다음을 사용하여 하위 구성 요소의 템플릿에서 참조할 수 있습니다.

<div class="title">{{ tool.title }}</div>
<div class="description">{{ tool.description }}</div>

언급URL : https://stackoverflow.com/questions/45313990/pass-data-object-from-parent-to-child-component