コンポーネント間でデータを受け渡す際に問題が発生しました

Question

コンポーネント内のメソッドによって作成されたオブジェクト配列を別のコンポーネントに渡すにはどうすればよいですか？私は小道具を使用しようとしましたが、おそらく小道具の働きを理解するのは間違いです。

<template> 
    <div class="media-body"> 

    <ul> 
     <li v-for="item in items" v-bind:class="{ active: item.active }">{{ item.text }} 
     </li> 
    </ul> 

     <button type="button" class="btn btn-danger" v-on:click="addItem">Test</button> 

</template> 

<script> 


export default { 

    data() { 
     return { 
      item: "a", 
      item2: "b", 
      item3: "c", 
      item4: "d", 
      items: [], 
    } 
     }, 

    methods: { 

     addItem: function() { 

      var testArray = this.item.concat(this.item2, this.item3, this.item4); 

      for (var i = 0; i < testArray.length; i++) { 
       this.items.push({ 
        text: testArray[i], 
        active: false }); 
      } 

      // if I check console.log(this.items) at this point I can see the data I want to pass 
     }, 

    } 
} 

</script> 

2次コンポーネント私はデータを渡そうとしています。

<template> 
    <div class="media-body"> 
     <div class="media-label">Title: 
     <textarea class="form-control" placeholder="Title"></textarea> 
     </div> 
     </div> 
</template> 

<script> 

export default { 

props: ['items'], 

data() { 
    return { 

    } 
}, 

</script> 

Answer 1

あなたが最初のコンポーネントに次のコードを記述する必要があり、他のコンポーネントに小道具を渡すために：

1. は、HTMLコードに<secondComponent :items="items" />を追加しました。
2. インポートし、このようにVUEのコンポーネントでsecondComponentを使用します。ここではcomponents: [secondComponent]

は、これらの変更との完全なコードです：あなたはすでにそのことができます小道具、などの項目を定義した第二の成分で

<template> 
    <div class="media-body"> 
    <ul> 
     <li v-for="item in items" v-bind:class="{ active: item.active }">{{ item.text }} 
     </li> 
    </ul> 
     <button type="button" class="btn btn-danger" v-on:click="addItem">Test</button> 
    <secondComponent :items="items" /> 
    </template> 

<script> 
    import secondComponent from '/path/of/secondComponent' 
    export default { 
    components: [secondComponent] 
    data() { 
     return { 
      item: "a", 
      item2: "b", 
      item3: "c", 
      item4: "d", 
      items: [], 
    } 
     }, 

    methods: { 

     addItem: function() { 

      var testArray = this.item.concat(this.item2, this.item3, this.item4); 

      for (var i = 0; i < testArray.length; i++) { 
       this.items.push({ 
        text: testArray[i], 
        active: false }); 
      } 

      // if I check console.log(this.items) at this point I can see the data I want to pass 
     }, 

    } 
} 

</script> 

2番目のコンポーネントのテンプレート/ HTMLでも使用できます。