Ву.js-как я могу поделиться родительской опорой с дочерними компонентами?

Ву.js-как я могу поделиться родительской опорой с дочерними компонентами?

04.01.2019 07:53:25 Просмотров 41 Источник

Я пытаюсь выяснить, как передать опору в родительских дочерних компонентах.

Он отлично работает, если я добавляю атрибут prop с # id внутри тега дочернего компонента, например Image cid= "488484-49544894-584854", но я хотел бы использовать тот же cid в одном месте (родитель) - возможно ли это?

Родительский и дочерний компоненты имеют одинаковые функции подключения и передачи данных. Cid передается в contentDeliveryUrl для сбора данных.

Апп.вю

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

Данные возвращаются как неопределенные для всех компонентов, использующих Vue Devtools.

У вопроса есть решение - Посмотреть?

Ответы - Ву.js-как я могу поделиться родительской опорой с дочерними компонентами? / Vue.js - How do I share parent prop with child components?

Является ответом!
Boussadjra Brahim

04.01.2019 07:59:04

Добавьте свойство cidItemciditem например и привяжите его к реквизитам следующим образом

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

Поскольку ваш компонент имеет ту же структуру , я рекомендую использовать mixins, создайте файл с именем myMixins.jsи добавьте в него следующий код :

const myMixins = {
 props:['cid'],
  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: []
    }
  }
}

export default mixins;

и внутри каждого компонента добавьте это :

    import myMixins from './myMixins'
    export default{
          ....
         mixins: [myMixin]
      }
https://stackoverflow.com/questions/54043089/vue-js-how-do-i-share-parent-prop-with-child-components/54043162#comment94977844_54043162
Спасибо. Это сработало идеально.
Закрыть X