Javascript Vue.js-如何与子组件共享父道具？

我想知道如何在父组件到子组件中传递道具

如果我在子组件标记内添加带有#id的prop属性（例如Image cid=“488484-49544894-584854”），效果会非常好，但我希望在一个位置（父级）使用相同的cid-这可能吗

父组件和子组件具有相同的挂载和数据功能。cid被传递到contentDeliveryUrl以收集数据

App.vue

<template>
  <div id="app" class="container" cid="7e4301de-9c6e-4fab-9e68-3031b94d662d">

    <Images cid="same as parent div" />

    <Video cid="same as parent div" />

    <TextType cid="same as parent div" />

    <Card cid="same as parent div" />

  </div>
</template>

<script>
  import axios from 'axios';
  import Images from "./components/Images";
  import Video from "./components/Video";
  import TextType from "./components/TextType";
  import Card from "./components/Card";

  export default {
    name: 'app',
    props: ["cid"],
    components: {
      Images,
      Video,
      TextType,
      Card
    },
    mounted() {
      axios({method: "GET", "url": this.contentDeliveryUrl}).then(result => {
          // eslint-disable-next-line
          this.content = amp.inlineContent(result.data)[0];
          console.log(this.content)
        }, error => {
          console.error(error);
        });
    },
    data() {
      return {
        contentDeliveryUrl: 'https://c1.adis.ws/cms/content/query?fullBodyObject=true&query=%7B%22sys.iri%22%3A%22http%3A%2F%2Fcontent.cms.amplience.com%2F${this.cid}%22%7D&scope=tree&store=testing',
        content: []
      }
    }
  }
</script>

<template>

<div v-if="content.image">

</div>

</template>

<script>
  import axios from 'axios';

  export default {
    props: ["cid"],
    name:'Images',

    mounted() {
      axios({method: "GET", "url": this.contentDeliveryUrl}).then(result => {
          // eslint-disable-next-line
          this.content = amp.inlineContent(result.data)[0];
          console.log(this.content)
        }, error => {
          console.error(error);
        });
    },
    data() {
      return {
        contentDeliveryUrl: 'https://c1.adis.ws/cms/content/query?fullBodyObject=true&query=%7B%22sys.iri%22%3A%22http%3A%2F%2Fcontent.cms.amplience.com%2F${this.cid}%22%7D&scope=tree&store=testing',
        content: []
      }
    },
}
</script>

从“axios”导入axios；
从“/components/Images”导入图像；
从“/components/Video”导入视频；
从“/components/TextType”导入TextType；
从“/components/Card”导入卡片；
导出默认值{
名称：“应用程序”，
道具：[“cid”]，
组成部分：{
图像，
视频
文本类型，
卡片
},
安装的（）{
axios（{method:“GET”，“url”：this.contentDeliveryUrl}）{
//eslint禁用下一行
this.content=amp.inlineContent（result.data）[0]；
console.log（this.content）
}，错误=>{
控制台错误（error）；
});
},
数据（）{
返回{
contentDeliveryUrl:'https://c1.adis.ws/cms/content/query?fullBodyObject=true&query=%7B%22sys.iri%22%3A%22http%3A%2F%2Fcontent.cms.amplience.com%2F${this.cid}%22%7D&scope=tree&store=testing'，
内容：[]
}
}
}

Image.vue

<template>
  <div id="app" class="container" cid="7e4301de-9c6e-4fab-9e68-3031b94d662d">

    <Images cid="same as parent div" />

    <Video cid="same as parent div" />

    <TextType cid="same as parent div" />

    <Card cid="same as parent div" />

  </div>
</template>

<script>
  import axios from 'axios';
  import Images from "./components/Images";
  import Video from "./components/Video";
  import TextType from "./components/TextType";
  import Card from "./components/Card";

  export default {
    name: 'app',
    props: ["cid"],
    components: {
      Images,
      Video,
      TextType,
      Card
    },
    mounted() {
      axios({method: "GET", "url": this.contentDeliveryUrl}).then(result => {
          // eslint-disable-next-line
          this.content = amp.inlineContent(result.data)[0];
          console.log(this.content)
        }, error => {
          console.error(error);
        });
    },
    data() {
      return {
        contentDeliveryUrl: 'https://c1.adis.ws/cms/content/query?fullBodyObject=true&query=%7B%22sys.iri%22%3A%22http%3A%2F%2Fcontent.cms.amplience.com%2F${this.cid}%22%7D&scope=tree&store=testing',
        content: []
      }
    }
  }
</script>

<template>

<div v-if="content.image">

</div>

</template>

<script>
  import axios from 'axios';

  export default {
    props: ["cid"],
    name:'Images',

    mounted() {
      axios({method: "GET", "url": this.contentDeliveryUrl}).then(result => {
          // eslint-disable-next-line
          this.content = amp.inlineContent(result.data)[0];
          console.log(this.content)
        }, error => {
          console.error(error);
        });
    },
    data() {
      return {
        contentDeliveryUrl: 'https://c1.adis.ws/cms/content/query?fullBodyObject=true&query=%7B%22sys.iri%22%3A%22http%3A%2F%2Fcontent.cms.amplience.com%2F${this.cid}%22%7D&scope=tree&store=testing',
        content: []
      }
    },
}
</script>

从“axios”导入axios；
导出默认值{
道具：[“cid”]，
名称：'Images'，
安装的（）{
axios（{method:“GET”，“url”：this.contentDeliveryUrl}）{
//eslint禁用下一行
this.content=amp.inlineContent（result.data）[0]；
console.log（this.content）
}，错误=>{
控制台错误（error）；
});
},
数据（）{
返回{
contentDeliveryUrl:'https://c1.adis.ws/cms/content/query?fullBodyObject=true&query=%7B%22sys.iri%22%3A%22http%3A%2F%2Fcontent.cms.amplience.com%2F${this.cid}%22%7D&scope=tree&store=testing'，
内容：[]
}
},
}

---

对于使用Vue Devtools的所有组件，数据返回为未定义。

例如，添加名为

cidItem

的数据属性，并将其绑定到您的道具，如下所示

<template>
  <div id="app" class="container" :cid="cidItem">

    <Images :cid="cidItem" />

    <Video :cid="cidItem"  />

    <TextType :cid="cidItem"  />

    <Card :cid="cidItem"  />

  </div>
</template>

<script>
  import axios from 'axios';
  import Images from "./components/Images";
  import Video from "./components/Video";
  import TextType from "./components/TextType";
  import Card from "./components/Card";

  export default {
    name: 'app',
    props: ["cid"],
    components: {
      Images,
      Video,
      TextType,
      Card
    },
    mounted() {
      axios({method: "GET", "url": this.contentDeliveryUrl}).then(result => {
          // eslint-disable-next-line
          this.content = amp.inlineContent(result.data)[0];
          console.log(this.content)
        }, error => {
          console.error(error);
        });
    },
    data() {
      return {
        contentDeliveryUrl: 'https://c1.adis.ws/cms/content/query?fullBodyObject=true&query=%7B%22sys.iri%22%3A%22http%3A%2F%2Fcontent.cms.amplience.com%2F${this.cid}%22%7D&scope=tree&store=testing',
        content: [],
        cidItem:'7e4301de-9c6e-4fab-9e68-3031b94d662d'
      }
    }
  }
</script>

在每个组件中添加以下内容：

    import myMixins from './myMixins'
    export default{
          ....
         mixins: [myMixin]
      }