VueJS - 如何在同一個組件中使用道具來指定另一個組件中的值

Question

我是 vuejs 的新手，我想知道如何使用 g 來安裝另一個組件的 function。 下面我將展示我是如何嘗試的。

這是我的Component.vue

<template>
  <div class="Passing prop value">
    <chart :id="'3'"></chart>
  </div>
  <div class="Passing prop value second time">
    <chart :id="'8'"></chart>
  </div>
</template>

<script>
import chart from '.chartline.vue'
export default{
    props: {
        id: {
            type: String,
            required: true 
         }
    },
  components: {chart},
  mounted (){
    this.$http.get('api/goes/here' + this.id ) <-- here id should get value 3 for 1st div and value 8 for second div
  }
}
</script>

我在組件中傳遞 id 值，我希望在安裝的 function 中具有相同的值。

你可以嘗試通過使用道具來實現它，但不知道瀏覽器中沒有顯示任何內容，所以這是使用道具的正確方法。

目標：我想在導入的組件中給出 id 並在那里指定值。請幫幫我。

Answer 1

Firstafall let me add a solution assuming that your prop 'id' contains just one value
```
<template>
  <div class="Passing prop value">
    <chart :id="getId"></chart>
  </div>
</template>

<script>
import chart from '.chartline.vue'
export default{
    props: {
        id: {
            type: String,
            required: true 
         }
    },
  components: {chart},
  computed: {
    getId() {
       return this.id;
    }
  }
  mounted (){
    this.$http.get('api/goes/here' + this.id ) <-- here id should get value 3 for 1st div and value 8 for second div
  }
}
</script>

// Secondly like if your response has a array of id's then you can do this in this way

```
<template>
  <div v-for="idd in getIds" class="Passing prop value">
    <chart :id="idd"></chart>
  </div>
</template>

<script>
import chart from '.chartline.vue'
export default{
    props: {
        id: {
            type: String,
            required: true 
         }
    },
    data() {
      return {
      ids: []
      };
    }
    components: {chart},
    computed: {
      getIds() {
       return this.ids;
      }
    }
    mounted (){
    this.ids = this.$http.get('api/goes/here' + this.id ) <-- Assuming that the 
    response is an array
    }
}
```