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

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

objective: 我想在导入组件中给id并指定值there.Please帮帮我

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
    }
}
```

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

VueJS - How do I use props in same component to specify the value in another component

vue.js

reusability