web-dev-qa-db-ja.com

Vuejs 2 propオブジェクトを子コンポーネントに渡し、取得する

小道具と取得を使用して子コンポーネントにオブジェクトを渡す方法を疑問に思っていました。私はそれを属性として行う方法を理解していますが、オブジェクトを渡し、子コンポーネントからオブジェクトを取得する方法は？子コンポーネントからthis.propsを使用すると、未定義またはエラーメッセージが表示されます。

親コンポーネント

 <template>
        <div>
        <child-component :v-bind="props"></child-component>     
        </div>
    </template>

<script>
import ChildComponent from "ChildComponent.vue";

export default {
    name: 'ParentComponent',
    mounted() {

    },
     props: {
       firstname: 'UserFirstName',
       lastname: 'UserLastName'
       foo:'bar'
    },
    components: {
    ChildComponent
    },
    methods: {

      }
}
</script>

<style scoped>
</style>

子コンポーネント

<script>
<template>
   <div>
   </div>
</template>
export default {
    name: 'ChildComponent',
    mounted() {
    console.log(this.props)
  }  
}
</script>
componentsvuejs2
10
icode

そのような単純な：

親コンポーネント：

<template>
  <div>
    <my-component :propObj="anObject"></my-component>     
  </div>
</template>

<script>
import ChildComponent from "ChildComponent.vue";

export default {
    name: 'ParentComponent',
    mounted() { },
    props: {
       anObject: Object
    },
    components: {
      ChildComponent
    },
}
</script>

<style scoped>
</style>

子コンポーネント：

export default {
  props: {
    // type, required and default are optional, you can reduce it to 'options: Object'
    propObj: { type: Object, required: false, default: {"test": "wow"}},
  }
}

これは動作するはずです！

小道具のドキュメントもご覧ください。
https://vuejs.org/v2/guide/components.html#Props

既にコメントで指摘されているように、子から親にデータを送信したい場合は、イベントを使用するか、2.3 +

https://vuejs.org/v2/guide/components.html#sync-Modifier

17
V. Sambor

これは、多くの小道具をオブジェクトとしてコンポーネントに渡すための簡単なソリューションです

親コンポーネント：

<template>
  <div>
    <!-- different ways to pass in props -->
    <my-component v-bind="props"></my-component>     
    <my-component :firstname="props.firstname" :lastname="props.lastname" :foo="props.foo">
    </my-component>     
  </div>
</template>

<script>
  import ChildComponent from "ChildComponent.vue";

  export default {
    name: 'ParentComponent',
    props: {
      firstname: 'UserFirstName',
      lastname: 'UserLastName'
      foo:'bar'
    },
    components: {
      ChildComponent
    }
  }
</script>

子コンポーネント：

<template>
  <div>
  </div>
</template>
<script>
export default {
  name: 'ChildComponent',
  props: ['firstname', 'lastname', 'foo'],
  mounted() {
    console.log(this.props)
  }  
}
</script>
0
MattClimbs