VueJS - 如何在同一个组件中使用道具来指定另一个组件中的值

Question

我是 vuejs 的新手，我想知道如何将 props 用于挂载另一个组件的功能。下面我将展示我是如何尝试的。

这是我的 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 值，并且我希望在挂载的函数中具有相同的值。

你可以尝试通过使用道具来实现它，但不知道浏览器中没有显示任何内容，所以这是使用道具的正确方法。

目标：我想在导入的组件中给出 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
    }
}
```